Все карты расширяются одновременно, а не по отдельности при определении с данными JSON

Question

Можно ли расширить мои карты индивидуально, а не так, как они делают сейчас, все вместе?

Я определил массив данных JSON, который будет использоваться для заполнения деталей карт, но япросто не получается заставить их расширяться по отдельности.

Простые данные

export const DATA = [
    {
      name: 'Some name 1',
    },
    {
      name: 'Some name 2',
    }
  ];

.ts file

export class AppComponent  {
  data;
  expanded = [];

  constructor(public toast: MatSnackBar) {
    this.data = DATA;
  }    
}

html

<div class="container">
  <mat-card *ngFor="let item of data" #panel [ngClass]="{expanded: expanded[item]}" [class.mat-elevation-z8]="expanded[item]">
    <div class="header">
      Some content here
      <div class="toggle">
      <button mat-icon-button>
        <mat-icon *ngIf="!expanded[item]" (click)="expanded[panel]=!expanded[item]">
          edit
        </mat-icon>
        <mat-icon *ngIf="expanded[item]" (click)="expanded[item]=!expanded[item]">cancel</mat-icon>
      </button>
      </div>
    </div>
    <div class="body" *ngIf="expanded[item]">
      Some content here
    </div>
  </mat-card>
</div>

Вот мой стек-блиц для вас, чтобы вы могли поиграть с

Редактировать: Моя «логика»Выше приведено описание чего-то подобного:

<mat-card #panel *ngFor="let x of [1,2,3]" [ngClass]="{expanded: thisExpands[x]}">
    <div class="header">
      <div class="toggle">
        <button 
            mat-flat-button 
            (click)="thisExpands[x]=!thisExpands[x]"
...

Однако эти карты генерируются из гораздо более простого массива данных.

Answer 1

Вы можете использовать index для доступа к конкретному элементу в forLoop:

<mat-card *ngFor="let item of data; let i = index">

</mat-card>

Ваш HTML-код:

<div class="container">
    <mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
        <div class="header">
            Some content here
            <div class="toggle">
                <button mat-icon-button>
        <mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
          edit
        </mat-icon>
        <mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
      </button>
      </div>
    </div>
    <div class="body" *ngIf="expanded[item]">
      Some content here
    </div>
  </mat-card>
</div>

Пример StackBlitz

Answer 2

<div class="container">
  <mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
    <div class="header">
      Some content here
      <div class="toggle">
      <button mat-icon-button>
        <mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
          edit
        </mat-icon>
        <mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
      </button>
      </div>
    </div>
    <div class="body" *ngIf="expanded[i]">
      Some content here
    </div>
  </mat-card>
</div>

Попробуйте это.Используйте index вместо элемента.