如何在ngFor循环中重复应用一个条件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (357)

我有一个相当直接的用例; 一个表格式的用户列表,其中每个用户可能是活动的或不活动的。有条件的样式应用于多个位置:

<tr *ngFor="let user of users" [ngClass]="{'not-active': user.status !== 'ACT'}">
<td>{{user.username}}</td>
<td>{{user.status}}</td>
<td>
  <button [disabled]="user.status !== 'ACT'">Edit</button>
  <button [disabled]="user.status === 'ACT'">Activate</button></a>
</td>

这不是很好,因为我必须三次阐明我的条件逻辑。如果我能写出来会更好:

<tr *ngFor="let user of users; let isActive = user.status === 'ACT';"
        [ngClass]="{'not-active': !isActive}">
<td>{{user.username}}</td>
<td>{{user.status}}</td>
<td>
  <button [disabled]="!isActive">Edit</button>
  <button [disabled]="isActive">Activate</button></a>
</td>

如何在ngFor循环中重复应用一个条件?

提问于
用户回答回答于

我认为你可以实现的唯一方法是将tr内容封装成某些东西并使用a *ngIf。就像是:

<tr *ngFor="let user of users">
    <div *ngIf="user.status === 'ACT'; let isActive" [ngClass]="{'not-active': !isActive}">

      <td>{{user.username}}</td>
     <td>{{user.status}}</td>
     <td>
        <button [disabled]="!isActive">Edit</button>
         <button [disabled]="isActive">Activate</button></a>
     </td>
</div>

所属标签

可能回答问题的人

  • uncle_light

    5 粉丝518 提问6 回答
  • 优惠活动秘书

    0 粉丝2 提问6 回答
  • 最爱开车啦

    8 粉丝503 提问6 回答
  • 天使的炫翼

    17 粉丝531 提问5 回答

扫码关注云+社区

领取腾讯云代金券