如何以角度切换 mat-icon？

Question

我在 mat-table 中有多个 mat-icon（动态出现）。当我单击特定的垫子图标以切换垫子图标时，它会切换所有垫子图标，但我只想切换单击的垫子图标。如何做到这一点？

follow.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

 <ng-container matColumnDef="action">
   <th mat-header-cell *matHeaderCellDef> Follow </th>
     <td mat-cell *matCellDef="let element">
       <button mat-mini-fab color="primary" (click)="toggleIcon()"><mat-icon>{{icon}}</mat-icon></button>
    </td>
 </ng-container>
</mat-table>

follow.component.ts

  dataSource : MatTableDataSource<PeriodicElement> ;
  displayedColumns: string[] = ['username','action'];  

toggleIcon() {
  if (this.icon === 'person_add_disabled') {
    this.icon = 'person_add';
  } else {
    this.icon = 'person_add_disabled'
  }
}

this.supportService.getUsersListForFollowing({'userid':this.userid}).
  subscribe((data) => {
   if(data.status == 1){
     this.dataSource = new MatTableDataSource<PeriodicElement>(data.payload);
   }
  }
);

export interface PeriodicElement {
  username : string;
}

Answer 1

我不熟悉角度材料，但我认为您应该在元素本身中包含禁用信息。 使用三元运算符，可以在图标组件中轻松输出想要的图标。

<td mat-cell *matCellDef="let element">
   <button mat-mini-fab color="primary" (click)="element.disabled = !element.disabled"><mat-icon>{{element.disabled ? 'person_add_disabled' : 'person_add'}}</mat-icon></button>
</td>

以下语句切换行的 disabled 属性

(click)="element.disabled = !element.disabled"

此三元运算符返回 mat-icon 使用的所需字符串

<mat-icon>{{element.disabled ? 'person_add_disabled' : 'person_add'}}</mat-icon>