通過單擊交替 Angular 材料圖標

Question

我有一個材料表，其中有一列稱為狀態（見圖）

我需要的是通過單擊材料圖標，該圖標應根據“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>

我苦苦掙扎了幾天，以提出正確的邏輯來應對問題。 對此有何想法或可能是其他一些解決方案？ 提前致謝。

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>