javascript - Angular 4 - for循环中的ngIf

Question

我正在尝试使用指令 ngIf 根据条件呈现 DOM 元素。使用 ngFor 在 for 循环中确定条件。

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

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

在我的组件中，我有一些相应的属性被初始化为 false:

 displayCta = false;

和trackBy在同一个组件中使用的对应函数如下:

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

我期望的是，当 displayCta 设置为 true 时，将呈现类为 card 的元素。对此进行调试确实表明 displayCta 在 true 和 false 之间切换。

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

这是否取决于组件的生命周期，即它查看 displayCta 的初始状态，决定它是否是真/假进行所有渲染，然后调用函数 trackByFn 使 no与渲染内容的区别？

Answer 1

您可以在 *ngFor 语句中获取索引并分配它，然后在 *ngIf 中使用它。

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

如果这只是一个简单示例，那么您应该更新实际模型以跟踪它是否应该显示。如评论中所述，将逻辑放在跟踪功能中并不是一个好主意。