javascript - *NgFor 切换显示/隐藏单个元素

Question

我有一段 HTML 代码:

<!-- Toggle show hide -->
    <ng-container *ngFor="let plate of plates; let i=index">
      <button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
      <span *ngIf="!show">
        <i>{{i}}</i>
        <h1>{{ plate.PlateNumber }}</h1>
      </span>
    </ng-container>

和 Angular 代码:

toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if (this.show)
      this.buttonName = "Show";
    else
      this.buttonName = "Hide";
  }

它工作正常，但我需要当我单击按钮时它隐藏特定的 <span>容器。我添加了图像来说明我想要做什么，但是当我按下按钮时，它会隐藏所有元素。

Answer 1

在 plate 对象中添加一个名为 show 的属性，然后根据点击更改值。

 <ng-container *ngFor="let plate of plates; let i=index">
      <button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
      <span *ngIf="!plate.show">
        <i>{{i}}</i>
        <h1>{{ plate.PlateNumber }}</h1>
      </span>
 </ng-container>

 toggle(plate) {
    plate.show = !plate.show;

    // CHANGE THE NAME OF THE BUTTON.
    if (plate.show)
      this.buttonName = "Show";
    else
      this.buttonName = "Hide";
  }