Question

以下代码未应用ngClass。

 <table mat-table [dataSource]="dataSourceAB">
  <ng-container matColumnDef="Type">
   <th mat-header-cell *matHeaderCellDef> Type </th>
   <td mat-cell *matCellDef="let element" [ngClass]="(element.TxnType=='Credit')?'text-success':'text-danger'"> {{element.TxnType}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumnsAB"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumnsAB;"></tr>
/table>

我正在显示正确的数据，但未应用课程。错了吗？

Answer 1

在CSS中添加text-success和text-danger

Stackblitz demo

Component.html

<table mat-table [dataSource]="dataSourceAB" class="mat-elevation-z8">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let element" [ngClass]="(element.TxnType=='Credit')?'text-success':'text-danger'"> {{element.TxnType}}
            </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumnsAB"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsAB;"></tr>
</table>

ngClass是否未在角度数据表中应用？

1 个答案: