问题描述
- AppModule - 包含带有路由器出口的应用组件
- HomeModule - 包含 Home 组件 - 使用 ngFor。 (ngFor 在这里工作没有问题)
- TestModule - 包含测试模块 - 使用 ngFor(ngFor 在这里不起作用)
我已经在 AppModule 中导入了“browserModule”。 我在 HomeModule 和 TestModule
中也有“CommonModule”导入我在 HomeModule home.component.html 文件中有此代码(按预期工作)
<mat-card [class]="(selected_test.id === test.id)? 'test-card selected': 'test-card'" *ngFor="let test of tests" (click)="selectCard($event,test)">
<div class="left">
<div class="title">{{test.title}}</div>
<div class="description">{{test.description}}</div>
</div>
<div class="right">
<div class="question-count">{{test.questions.length}} Question{{(test.questions.length > 1?'s':'')}}</div>
</div>
</mat-card>
我在 TestModule 中有这段代码 test.component.html:
<div *ngFor="let q of test.questions" class="question-item">
<div class="question-title">{{q.prompt}}</div>
<div class="question-options">
<!-- <div *ngFor="let option of question.options" class="question-option">{{option}}</div> -->
</div>
</div>
代码段 1 中的代码有效,而代码段 2 中的代码不起作用。我不确定这是怎么回事。
编辑:
app.module.ts
import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar'
import { MatCardModule } from '@angular/material/card';
import { HomeModule } from './pages/home/home.module';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
AppComponent
],imports: [
browserModule,AppRoutingModule,browserAnimationsModule,MatToolbarModule,],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { MatButtonModule } from '@angular/material/button'
import { MatCardModule} from '@angular/material/card'
@NgModule({
declarations: [HomeComponent],imports: [
CommonModule,MatButtonModule,MatCardModule
],exports:[
]
})
export class HomeModule { }
test.module.ts
解决方法
尝试更改 appModule
中的导入顺序。将 BrowserModule
作为第一个导入。
imports: [
BrowserModule,AppRoutingModule,RouterModule,HttpClientModule,NgbModule,NgxSpinnerModule,ModalModule.forRoot(),FormsModule,ReactiveFormsModule
],
,
有点晚了,但我遇到了同样的问题,并找到了解决方法。
我的组件模块从未(直接或间接)导入到我的 AppModule
中,其中 BrowserModule
被导入。那么它就不会声明 ngFor
指令。
换句话说,您的 TestModule
必须在 AppModule
的导入列表中:
@NgModule({
declarations: [AppComponent],imports: [BrowserModule,...,TestModule],providers: [],bootstrap: [AppComponent],})
export class AppModule {}
或者您的模块必须导入到已导入到 AppModule
中的其他模块之一中:
AppModule [imports] AnyModule(s) [imports] TestModule