Angular 无法绑定到“ngForOf”，因为它不是“div”的已知属性

Question

我有 products-list.component.html 模板和使用 *ngFor 指令的模板。我在 products-list.module.ts 中使用 CommonModule 并且在 app.module.ts 中使用一次 BrowserModule 并三次检查 *ngFor 的用法，如果它是真的。仍然给出“无法绑定到‘ngForOf’，因为它不是‘div’的已知属性（在‘ProductsListComponent’组件模板中使用）”错误。当我尝试将延迟加载添加到我的应用程序时，问题就开始了

products-list.component.html

<app-navbar></app-navbar>
<div class="products-list">
    <h3 class="products-list__header">Products</h3>
    <div class="products-list__products">
        <div class="product-card" *ngFor="let product of products">
            <a (click)="goToProductDetails(product.id)" >
                <img class="product-card__img" [src]="product.image | safePipe" />
                <div class="product-card__price">$ {{product.price}}</div>
                <div class="product-card__name">{{product.name}}</div>
                <button (click)="addToCart($event, product)"class="product-card__button" type="button">Add To Cart</button>
            </a>
        </div>
    </div>
</div>

products-list.module.ts

import { SafepipeModule } from './../../safepipe/safepipe.module';
import { FormsModule } from '@angular/forms';
import { NavbarModule } from 'src/app/components/navbar/navbar.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsListRoutingModule } from './products-list-routing.module';
import { ProductsListComponent } from './products-list.component';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  declarations: [ProductsListComponent],
  imports: [
    CommonModule,
    ProductsListRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NavbarModule,
    
    
  ]
  ,exports:[ProductsListComponent]
})
export class ProductsListModule { }

Answer 1

使用 *ngFor 用于迭代对象数组或数组数据

Answer 2

我收到这个错误我添加了 commonmodule 浏览模块也仍然有问题我也将它添加到 module.ts 中还有那个组件