Question

我有一个相当简单的用例;用户的表格列表，每个用户可能活动。根据它的不同，行的样式不同。条件样式应用于多个位置：

proxy = urllib2.ProxyHandler({'http': '127.0.0.1'})
opener = urllib2.build_opener(proxy)

显然，这不是很好，因为我必须拼出我的条件逻辑三次。如果我能写的话会好得多：

<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>

但是，我从阅读this post和其他人那里了解到目前无法做到这一点。

上面帖子中提出的解决方法是创建一个包含HTML模板的组件（对于表行？），然后在组件类中执行逻辑。对于相对简单的要求来说，这似乎是一个很大的开销......

所以在深入研究之前，我想问一下这是否真的是解决这类问题的规范解决方案？

在回复评论时，我在stackblitz上实现了一个简单的问题示例（之前我没有用过......你能看到我的代码库吗？）。

Answer 1

编辑：答案是否定的，你不能在* 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

如何在ngFor循环中重复应用条件？

1 个答案: