Angular , mat-table, html 元素切换

Question

如何根据 Table 列中的值在两个 html 元素之间切换？当 Column 值加载到 dataSource 变量中时，我正在渲染它。那么有什么方法可以使用列值来呈现特定的 html .

Answer 1

如果您希望某些内容根据模板中的值对模板做出反应 table，那是可行的。例如，我要访问 element.weight，当元素值为 > 10 时，我将呈现一些 HTML 更改。在这种情况下，如果它超过 10，则添加一个绿色圆圈；如果 < 10.

，则添加一个红色圆圈

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}}
    <div *ngIf="element.weight >= 10" style="height: 10px; width: 10px; border-radius: 10px; background: green"></div>
    <div *ngIf="element.weight < 10" style="height: 10px; width: 10px; border-radius: 10px; background: red"></div>
    </td>
  </ng-container>

这是一个工作示例：https://stackblitz.com/edit/angular-dhjzer?file=src%2Fapp%2Ftable-basic-example.html

Angular , mat-table, html 元素切换

Angular , mat-table, html element toggle

angular

angular-ng-if

mat-table

angular12

ng-switch