代码之家 › 专栏 › 技术社区 › physicsboy

使用JSON数据定义时,所有卡同时扩展,而不是单独扩展

angular-material typescript angular css html

physicsboy · 技术社区 · 7 年前

简单数据

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>

Here is my stackblitz for you to play with

我上面的“逻辑”来自于看到类似的实现:

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

2 回复 | 直到 7 年前

Prashant Pimpale Dila Gurung 7 年前

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 Example

Nguyá»n Thiá»n Lai 7 年前

<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 而不是项目。