控制台 Angular 9 中的警告：无法绑定到 'ngForOf'，因为它不是 'li' 的已知 属性

Question

我正在使用数组的 *ngFor，它不显示数据。我在我的 app.module.ts 中导入了 BrowserModule，在我的子模块中导入了 CommonModule。

Chrome 控制台显示此警告：无法绑定到 'ngForOf'，因为它不是 'li' 的已知 属性。

我的代码：

.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../coco-api/services/product.service';
import { Product } from 'src/app/model/product.model';
import { async } from 'rxjs/internal/scheduler/async';

@Component({
  selector: 'app-coco-workbench-product-list',
  templateUrl: './coco-workbench-product-list.component.html',
  styleUrls: ['./coco-workbench-product-list.component.css']
})
export class CocoWorkbenchProductListComponent implements OnInit {

  public products: Array<any>;

  constructor(
    private productService: ProductService
  ) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.productService.getAll().toPromise().then(data => {
      this.products = data.data;
    })
      .catch();
  }

}

模板：

<li *ngFor="let p of products">
    {{p}}
</li>

child.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CocoWorkbenchProductListComponent } from './coco-workbench-product-list/coco-workbench-product-list.component';



@NgModule({
  declarations: [CocoWorkbenchProductListComponent],
  imports: [
    CommonModule
  ]
})
export class CocoWorkbenchProductModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ViewsModule } from './views/views.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ViewsModule,
    HttpClientModule ,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

产品 属性 可能看起来没有信息，但在模板中执行以下操作会显示 [Object object]、[Object object]

{{products}}

Answer 1

您如何从您的应用中引用子模块和子组件 module/component？

您可能需要从 CocoWorkbenchProductModule 导出 CocoWorkbenchProductListComponent 并在 AppModule 中导入 CocoWorkbenchProductModule。