for循环中基于条件的Mat-icon显示

Question

我有一个 angular-django 应用程序，它对第三方应用程序进行 aPI 调用并 returns json 响应。我正在遍历响应并在 table.

中显示数据

<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。例如，如果值为 Successful，我想显示“检查圆圈图标”，如果值为“Faulted”，我想显示“错误图标”等。这可能吗？

更新：已实施 ngIf 但对齐顺序不正确：

谢谢

Answer 1

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

Answer 2

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。或者甚至使用 returns 的自定义方法使其动态化图标：

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

for循环中基于条件的Mat-icon显示

Mat-icon display based on condition in for loop

django

angular

angular-ng-if

mat-icon