我有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 { }
1条答案
按热度按时间dldeef671#
使用 *ngFor迭代对象或数组数据的数组