Javascript 角度4-for循环中的ngIf

我正在尝试使用指令

ngIf

根据条件呈现DOM元素。使用

ngFor

在for循环中确定该条件

为了进一步解释，我在模板中有以下内容：

<div class="flex-card" *ngFor="let thing of things; trackBy: trackByFn">
<div class="card" *ngIf="displayCta">
...
</div>
</div>

trackBy在同一组件中使用的相应功能如下：

trackByFn(index: any, item: any) {
  this.displayCta = (index % 3 === 0);
}

我所期望的是，当displayCta设置为true时，将呈现class

card

的元素。调试这确实表明displayCta在true和false之间切换

然而，呈现的内容纯粹基于displayCta的初始状态，而不是修改其状态的逻辑

---

这是否取决于组件的生命周期，即它查看displayCta的初始状态，决定它是否为truthy/Falsy进行所有渲染，然后调用函数

trackByFn

，对渲染的内容没有影响？

您可以在

*ngFor

语句中获取索引并分配它，然后在

*ngIf

中使用它

<div class="flex-card" *ngFor="let thing of things; let i = index; trackBy: trackByFn">
<div class="card" *ngIf="i%3===0">

---

如果这只是一个简单的示例，那么您应该更新实际模型以跟踪它是否应该显示。将逻辑放在跟踪函数中不是一个好主意，正如注释中所述。

在这种情况下，

displayCta

将发生很大变化，每个div将指向相同的值。您可以在您的

trackByFn

中的

thing

上添加一个字段，如下所示：

trackByFn(index: any, item: any) {
  item.show = (index % 3 === 0);
}

然后在你的ngIf中检查

<div class="card" *ngIf="thing.show">

---

或者按照Igor说的做。

不要编写有副作用的跟踪函数。不能保证什么时候会调用它。是的，这是一个很好的方法。事实上，我已经同意了这一点，而且它似乎在@rilester起作用——很高兴能帮上忙。在15分钟宽限期届满后，请考虑批阅答案。

<div class="card" *ngIf="thing.show">