在角度材料表中使用 ngIf 时出错答案

【问题标题】：Error when using ngIf inside angular material table在角度材料表中使用 ngIf 时出错
【发布时间】：2021-03-15 18:00:23
【问题描述】：

在角度材料表中的问题需要一些帮助。我使用 [datasource] 将简单数据传递给表，但我想评估数据源的值并根据这些值在表中显示值。例如，查看可能是值（1、2、3 或 4）的列 causa，例如，如果它等于 1，则在表中显示“欺诈”。

<h3>Lista casos</h3>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="idcaso">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ID Caso </th>
      <td mat-cell *matCellDef="let caso"> {{caso.idCaso}} </td>
    </ng-container>  

    <ng-container matColumnDef="estado">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Estado </th>
      <td mat-cell *matCellDef="let caso"> {{caso.estado}} </td>
    </ng-container>  

    <ng-container matColumnDef="causa">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Causa </th>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 1"> fraud </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 2"> Injustified </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 3"> stolen </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 4"> other </td>

    </ng-container> 

    <ng-container matColumnDef="detalles">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Detalles </th>
      <td mat-cell *matCellDef="let caso"> 
        <a routerLink="/dashboard/gestion/{{caso.idCaso}}"><button mat-button>Ver caso</button></a>
      </td>
    </ng-container> 


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> 
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

我收到下一个错误 ->

错误 NG5002：一个元素上不能有多个模板绑定。只使用一个以 * 为前缀的属性

【问题讨论】：

标签： angular angular-material angular-ng-if

【解决方案1】：

如另一个答案中所述，单个元素上不允许使用多个结构指令（具有* 语法的事物），因此您需要将它们分开，就个人而言，我会这样做，使用ngSwitch 指令：

<td mat-cell *matCellDef="let caso" [ngSwitch]="caso.causa"> 
  <ng-container *ngSwitchCase="1"> fraud </ng-container>
  <ng-container *ngSwitchCase="2"> Injustified </ng-container>
  <ng-container *ngSwitchCase="3"> stolen </ng-container>
  <ng-container *ngSwitchCase="4"> other </ng-container>
</td>

【讨论】：

【解决方案2】：

这样说

<td mat-cell *matCellDef="let caso" > 
<ng-container *ngIf="caso.causa === 1">
fraud
</ng-container>
<ng-container *ngIf="caso.causa === 2">
Injustified
</ng-container>
<ng-container *ngIf="caso.causa === 3">
 stolen
</ng-container>
<ng-container *ngIf="caso.causa === 4">
 other
</ng-container>
</td>

因为我们可以在每个元素上使用两个 * 绑定。

【讨论】：

正确，但最好另辟蹊径，有一个matCellDef，里面有多个ng-container

【解决方案3】：

如前所述，您不能在一个元素中使用 2 个结构指令。

我建议省略 5 个 *ngIfs 的使用。它使 html、代码变得混乱，看起来一点也不清晰。更何况模板圈复杂度太高，不推荐。

在 html 中使用类似的东西可能会更好

 <td mat-cell *matCellDef="let caso"> getCausaDescription(caso.causa) </td>

在 .ts 文件中

getCausaDescription(causa: number): string {
 switch (causa) {
  case 1:
    return 'Fraud';
  case 2:
    return 'Injustified';

  .....
  default:
    return 'Default name';
 }
}

【讨论】：