Question

需要帮助解决角度材料表中的问题。我使用 [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：一个元素上不能有多个模板绑定。只使用一个带有 *

前缀的属性

Answer 1

就这样吧

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

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

Answer 2

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

Answer 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';
 }
}

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

3 个答案: