Question

我在mat-table中有多个mat-icon（动态出现）。当我单击特定的Mat-icon切换Mat-icon时，它切换了所有Mat-icon，但是我只想切换单击的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>

以下语句切换行的禁用属性

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

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

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

如何在角度中切换Mat-icon？

1 个答案: