基于for回圈條件的mat-icon顯示-有解無憂

我有一個 angular-django 應用程式，它對第三方應用程式進行 API 呼叫并回傳 json 回應。我正在回圈回應并在表格中顯示資料。

<tr *ngFor="let item of job_list">
     
      <td style="text-align:center">{{item?.ReleaseName}}</td>
      <td style="text-align:center">{{item?.Source}}</td>
      <td style="text-align:center"><mat-icon *ngIf="Successful" style="color:green;">check circle icon</mat-icon>
                                    <mat-icon *ngIf="Faulted" style="color: red;">error icon</mat-icon> 
                                    <mat-icon *ngIf="Stopped" style="color: grey;">cancel icon</mat-icon>
                                    {{item?.State}}
                                  
                                  
      </td>
      <td style="text-align:center">{{item?.StartTime | date:'dd-MM-yyyy         HH:mm:ss'}}</td>
      <td style="text-align:center">{{item?.EndTime | date:'dd-MM-yyyy           HH:mm:ss'}}</td>

     
     </tr>

在這里，我想根據 {{item?.State}} 值顯示 mat-icon。例如，如果值為成功，我想顯示“檢查圓圈圖示”，如果它是“故障”，我想顯示“錯誤圖示”等。這可能嗎？

更新：已實作 ngIf 但對齊順序不正確：基于for回圈條件的mat-icon顯示

謝謝

uj5u.com熱心網友回復：

1.您可以嘗試ngSwitch解決方案，但ngIf也可以：

<td style="text-align:center">
    <mat-icon *ngIf="item?.State === 'Successful'" style="color:green;">check circle icon</mat-icon>
    <mat-icon *ngIf="item?.State === 'Faulted'" style="color: red;">error icon</mat-icon> 
    <mat-icon *ngIf="item?.State === 'Stopped'" style="color: grey;">cancel icon</mat-icon>
    {{item?.State}}                                                               
</td>

2. 或者甚至使用回傳圖示的自定義方法使其動態化：

.html：

<td style="text-align:center">
    <mat-icon [class]="getIconByItemState(item, true)">{{ getIconByItemState(item) }}</mat-icon>
    {{item?.State}}                                                               
</td>

.ts：

getIconByItemState(item, color: boolean = false): string {
   switch(item?.State) { 
      case 'Successful': { 
         return !color ? 'check circle icon' : 'green-icon'; 
      } 
      case 'Faulted': { 
          return !color ? 'error icon' : 'red-icon'; 
      }
      case 'Stopped': { 
          return !color ? 'cancel icon' : 'grey-icon'; 
      } 
      default: { 
         return 'default icon'; // ? 
      } 
   }
}

1.最好的解決方案（如果可能的話）是使狀態變數名稱等于圖示名稱：

<td style="text-align:center">
    <mat-icon [class]="item?.State   '-color'">{{ item?.State }}</mat-icon>
    {{item?.State}}                                                               
</td>

uj5u.com熱心網友回復：

 <td style="text-align:center" [ngSwitch]="item.State">
            <mat-icon **ngSwitchCase="Successful" style="color:green;">check circle icon</mat-icon>
            <mat-icon **ngSwitchCase="Faulted" style="color: red;">error icon</mat-icon> 
           <mat-icon **ngSwitchCase="Stopped" style="color: grey;">cancel icon</mat-icon>
                                                {{item?.State}}
 </td>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/381764.html

標籤：姜戈有角的 angular-ng-if 垫子图标

上一篇：角度材料進度條沒有被呼叫

下一篇：翻譯自定義角管中的文本(ngx-translate)