通过单击

Question

我有一个物料表，其中有一个称为状态的列（见图片）

我需要的是单击材料图标，该图标应根据'ts'文件中设置的值进行替换。我正在使用公共变量来更改图标。但是，由于我仅使用一个变量，因此所有行的效果都在发生。而且，如果我使用单击项的ID对其进行控制，则以前的单击值（图标）将替换为旧值（图标）。供您参考，我正在通过可观察（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>

我正在努力几天，以提出正确的逻辑来应对问题。对此有任何想法还是其他解决方案？预先感谢。

Answer 1

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"可以具有两个值“ finish”和“ unfinish”，然后该列变为

<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>