时间戳

首页 > 解决方案 > 使用 JSON 数据定义时，所有卡片同时扩展而不是单独扩展

html - 使用 JSON 数据定义时，所有卡片同时扩展而不是单独扩展

问题描述

是否可以单独扩展我的卡，而不是像现在一样，一起扩展？

我已经定义了一个 JSON 数据数组，用于填充卡片的详细信息，但我似乎无法让它们单独扩展。

简单数据

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

.ts 文件

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>

这是我的 stackblitz 供你玩

编辑： 我上面的“逻辑”来自于看到类似这样的实现：

<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]"
...

然而，这些卡片是从更简单的数据数组生成的。

标签： htmlcssangulartypescriptangular-material

解决方案

您可以使用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 示例

推荐阅读