我有一个相当简单的用例;一个表格式的用户列表,每个用户都可能是活动的或不活动的。根据行样式的不同,行的样式会有所不同。在多个place中应用条件样式:
<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>
然而,我从this post和其他人的阅读中了解到,这目前是不可能的。
从上面的帖子中提出的解决方法是创建一个包含HTML模板的组件(对于表行?)然后在component类中执行逻辑。对于一个相对简单的需求,这似乎是一个相当大的开销……
因此,在深入讨论之前,我想问一下,这是否真的是解决此类问题的规范解决方案?
作为对一条评论的回应,我在stackblitz上实现了一个简单的问题示例(我以前没有使用过这个……你能看到我的代码库吗?)。
发布于 2018-05-29 20:25:09
编辑:答案是否定的,你不能在*nfFor中声明作用域变量
我认为唯一能做到这一点的方法是将tr内容包装到某个东西中,并使用*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>
(我不能关闭tr
标签)
但是通过在这种方式上使用,您不会将not-active
类应用到表行,而是应用到内部div
https://stackoverflow.com/questions/50583474
复制相似问题