无法绑定到 'ngForOf',因为它不是 'li' Angular 的已知 属性 9
Can't bind to 'ngForOf' since it isn't a known property of 'li' Angular 9
这个问题在这里被问了很多次,在经历了足够多的解决方案之后,我提出这个问题是因为确保我的子模块中有 CommonModule
和我的 BrowserModule
的常见解决方案=30=] 不工作。
HTML 子模块
<div class="container bg-success">
hi <---- this works just fine
</div>
<ul>
<li *ngFor="let product of products">
<h2>{{ product.name }} ${{ product.id}}</h2>
</li>
</ul>
子模块中的组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css'],
})
export class ChildComponent implements OnInit {
constructor() {}
products = [
{
id: 1,
name: 'Licensed Frozen Hat',
},
];
ngOnInit(): void {}
}
子模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent} from './components/child-component.component';
@NgModule({
declarations: [ChildComponent],
imports: [CommonModule],
})
export class ChildModule {}
应用模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfigurationModule } from './modules/configuration/configuration.module';
@NgModule({
declarations: [AppComponent],
imports: [
NgbModule,
BrowserModule,
AppRoutingModule,
ConfigurationModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
正如 Eliya Cohen 在上面的评论中提到的,重新运行 ng serve 为我修复了它。保留这个以防万一有人遇到这个。
这个问题在这里被问了很多次,在经历了足够多的解决方案之后,我提出这个问题是因为确保我的子模块中有 CommonModule
和我的 BrowserModule
的常见解决方案=30=] 不工作。
HTML 子模块
<div class="container bg-success">
hi <---- this works just fine
</div>
<ul>
<li *ngFor="let product of products">
<h2>{{ product.name }} ${{ product.id}}</h2>
</li>
</ul>
子模块中的组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css'],
})
export class ChildComponent implements OnInit {
constructor() {}
products = [
{
id: 1,
name: 'Licensed Frozen Hat',
},
];
ngOnInit(): void {}
}
子模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent} from './components/child-component.component';
@NgModule({
declarations: [ChildComponent],
imports: [CommonModule],
})
export class ChildModule {}
应用模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfigurationModule } from './modules/configuration/configuration.module';
@NgModule({
declarations: [AppComponent],
imports: [
NgbModule,
BrowserModule,
AppRoutingModule,
ConfigurationModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
正如 Eliya Cohen 在上面的评论中提到的,重新运行 ng serve 为我修复了它。保留这个以防万一有人遇到这个。