时间戳

首页 > 解决方案 > 通过单击来替换 Angular 材质图标

angular - 通过单击来替换 Angular 材质图标

问题描述

我有一个材料表，其中有一列称为状态（见图）在此处输入图像描述

我需要的是通过单击材料图标，该图标应根据“ts”文件中设置的值交替显示。我正在使用公共变量来更改图标。但是，由于我只使用一个变量，所有行都会产生效果。此外，如果我使用单击项目的 id 控制它，则先前单击的值（图标）将替换为旧值（图标）。供您参考，我正在通过 observable (API) 显示和保存数据。因此无法从 API 中获取值并立即在列表中显示它。下面是 HTML 和“ts”的代码：

onClick(event, row) {
  if (event.srcElement.innerText === 'panorama_fish_eye') {
      this.statusIconTextTrue = 'check_circle';
      taskStatus = 'FINISHED_COMPLETED';
      archived = true;
      timeFinishedActual = new Date().getTime();
    } else {
      this.statusIconTextTrue = 'panorama_fish_eye';
      taskStatus = 'CREATED';
      archived = false;
      timeFinishedActual = null;
    }
}

<mat-icon (click)="onClick($event, element)">
                  {{ statusIconID == element.taskuuid && statusIconTextTrue ? statusIconTextTrue : statusIconText  }}
                </mat-icon>

我苦苦挣扎了几天，以提出正确的逻辑来应对问题。对此有何想法或可能是其他一些解决方案？提前致谢。

标签： angularangular-material

解决方案

Yasir，使用“状态”的值。点击只改变状态，见stackblitz

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=!element.status" mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>

如果您收到的数据中没有“状态”，您可以在订阅服务后轻松添加。想象一下，你有一个服务，它返回一个具有唯一属性日期的数据数组，你可以做类似的事情

dataService.subscribe((res:any)=>{
   res.forEach(x=>{
      x.status=false;
   })
   this.data=res
})

注意：例如，状态只有两个值“true”和“false”，这就是点击变得如此容易的原因，比如(click)="element.status=!element.status"可以有两个值“完成”和“未完成”，然后列变得像

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=element.status=='finish'?'unfinish':'finish'
        mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status=='finish'?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>

推荐阅读