angular - 如何在角材料表中使用 ng-If/*ng-If

Question

我正在尝试在表<td>中实现 ng-If，以便根据下面的屏幕截图显示帐户的活动/停用和锁定状态。当我的角度代码编译时，从屏幕截图中可以看出，2 个帐户（红色）被锁定，状态应该显示为 Locked。但是，红色下方的两个帐户没有被锁定，因此锁定的<td>元素根本不应该显示，只有<td>活动状态。任何指导将不胜感激。

       <td mat-cell *matCellDef="let row" ng-if="row.isLocked === true" [ngClass]="{ 'Locked':row.isLocked == true}"> Locked equals {{row.isLocked}} Active equals {{row.isActive}} </td>
        <td mat-cell *matCellDef="let row" ng-if="row.isActive === true" [ngClass]="{ 'Active':row.isActive == true}"> Locked equals {{row.isLocked}} Active equals {{row.isActive}}</td>

标签： angularangular-material

Answer 1

Locked equals {{row.isLocked}} Active equals {{row.isActive}}

返回Locked equals 0 Active equals true或Locked equals 1 Active equals false。因为，isLocked返回值 0 或 1，所以该属性不是布尔值。因此，您需要检查isLocked0 或 1 的值；或者您可以将属性类型更改为布尔值。

第一种方式（不改变 isLocked 属性类型）

<td mat-cell *matCellDef="let row">
    <p *ngIf="row.isLocked === 1">Content when isLocked is 1</p>
    <p *ngIf="row.isActive">Content when isActive is true</p>
</td>

第二种方式（将 isLocked 属性类型更改为布尔值）

<td mat-cell *matCellDef="let row">
    <p *ngIf="row.isLocked">Content when isLocked is true</p>
    <p *ngIf="row.isActive">Content when isActive is true</p>
</td>

只需遵循格式并应用您的自定义。