Question

我已经完成了 *ngFor 循环并添加了点击事件，但我需要点击事件到 0-index 项目。因此它适用于循环中的所有项目

Answer 1

鉴于 products 是一个对象数组，您可以为每个对象引入一个附加属性来控制其显示状态。

控制器 (*.ts)

export class ProductListComponent implements OnInit {
  products = products;
  clickMessage="";

  constructor() {
    console.log(this. Constructor + "you have entered");
  }

  ngOnInit(): void {
    this.products = products.map(product => ({ ...product, isHidden: true });
  }

  listView(product: any): void {
    this.clickMessage = "You are my Avenger";
    product.isHidden = !product.isHidden
  }
}

模板 (*.html)

<div *ngFor="let product of products | slice:0:3 let i=index">
  <h3>
    <a 
      (click)="listView(product)"
      [ngStyle]="{backgroundColor:'#1e88e5'}" 
      id="list" 
      [title]="products.name + 'details'"
    >
      {{i}} {{products.name}}
    </a>
    <h4 *ngIf="i<1" [hidden]="product.isHidden">{{clickMessage}}</h4>
  </h3>
</div>

我已经完成了 *ngFor 循环

1 个答案: