typescript Angular无法绑定到'ngForOf',因为它不是'div'的已知属性

xoshrz7s  于 2023-03-31  发布在  TypeScript
关注(0)|答案(1)|浏览(150)

我有products-list.component.html模板和使用ngFor指令的模板。我在products-list.module.ts中使用了CommonModule,在app.module.ts中使用了BrowserModule一次,并对ngFor用法进行了三次检查,如果为true。仍给出“无法绑定到”ngForOf“,因为它不是”div“的已知属性(used in the 'ProductsListComponent' component template)”错误。当我尝试向应用程序添加延迟加载时,问题就开始了

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 { }
dldeef67

dldeef671#

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

相关问题