* 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>

И угловой код:

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

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

Все работает нормально, но мне нужно, чтобы при нажатии на кнопку скрывалось, чтоконкретный <span> контейнер.Я добавил изображения, чтобы проиллюстрировать, что я хочу сделать, но когда я нажимаю кнопку, он скрывает все элементы.

Answer 1

Добавьте свойство с именем show в объект plate, а затем измените значение в зависимости от click.

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