无法绑定到 '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 为我修复了它。保留这个以防万一有人遇到这个。