Javascript *NGF用于切换显示/隐藏单个元素

我有一段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>

它工作正常，但我需要它，当我点击按钮时，它隐藏了特定的

容器。我添加了图像来说明我想做什么，但当我按下按钮时，它隐藏了所有元素

---

在

板块

对象中添加名为

显示

的属性，然后根据

单击

更改值

 <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";
  }

{{i}。{{buttonName}}
{{i}
{plate.PlateNumber}
拨动（板）{
plate.show=！plate.show；
//更改按钮的名称。
如果（板显示）
this.buttonName=“Show”；
其他的
this.buttonName=“Hide”；
}

在

板块

对象中添加名为

显示

的属性，然后根据

单击

更改值

 <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";
  }

{{i}。{{buttonName}}
{{i}
{plate.PlateNumber}
拨动（板）{
plate.show=！plate.show；
//更改按钮的名称。
如果（板显示）
this.buttonName=“Show”；
其他的
this.buttonName=“Hide”；
}

我知道这很简单。非常感谢你！你是救生员：）酷。一定要检查答案，如果这有帮助。我知道这很简单。非常感谢你！你是救生员：）酷。如果有帮助，请确保检查答案。

此

代表整个组件，而不是颗粒板。这就是为什么它隐藏/显示所有内容，它是一个组件级变量。

此

表示整个组件，而不是一个微粒板。这就是为什么它隐藏/显示所有内容，它是一个组件级变量。