在 ngFor 中创建组件时，Angular ngOnInit 从未执行

Posted 2023-03-13

【中文标题】在 ngFor 中创建组件时，Angular ngOnInit 从未执行

【英文标题】：Angular ngOnInit never executed when creating component inside ngFor

【发布时间】：2019-08-05 20:49:15

【问题描述】：

我遇到了一个谜。我在这个例子中的 ngFor 循环中：

<div *ngFor="let rc of sortedKeys(ruleImplementations)">
    <vi-rule-contract [descriptor]="ruleDescriptors[rc]" [item]="action" [rc]="rc">
    </vi-rule-contract>
</div>

仅对于那些 N 个创建的“vi-rule-contract”组件中的一个（一个非常具体的组件），ngOnInit 不会仅被称为具有（描述符、rc、项目）的新值的 ngOnChanges。对于所有其他“vi-rule-contract”，ngOnInit 将被调用，但不会被调用 ngOnChanges。所以这是我的问题：

是否存在组件上的 ngOnInit 永远不会只调用其 ngOnChanges 的情况？

PS Angular 6.1.10

【问题讨论】：

@Cyril，您好，我确信我可以提供控制台日志的打印屏幕。完整的示例不容易提供，因为它是一个大型应用程序。所有这些都已创建，我可以看到控制台日志。仅对于其中一个，它会跳过 ngOnInit 并直接转到 ngOnChanges。这里是控制台日志的截图snag.gy/EJDrjC.jpg

Hivaga，你所说的恰恰相反。最简单的例子是stackblitz.com/edit/…。我想你的问题是你的组件有问题

@Eliseo true 在一般情况下总是调用 ngOnInit。可能在具有特定数据的组件上执行失败。这是我试图支持的遗留代码:)

【参考方案1】：

问题是您有一个定义列表的函数，这意味着 ngFor 不断地重新执行，这是非常糟糕的做法，Angular 试图通过仅实例化一次组件但更改输入来拯救您。

您的解决方法是停止在模板中使用函数，并在需要时运行它。

<div *ngFor="let rc of sortedRuleImplementations">
    <vi-rule-contract [descriptor]="ruleDescriptors[rc]" [item]="action" [rc]="rc">
    </vi-rule-contract>
</div>

this.sortedRuleImplementations = this.sortedKeys(ruleImplementations);

我无法从您的代码中看出 ruleImplementations 何时更改，但您可以在可观察订阅或其他方式中执行此操作

【讨论】：

谢谢你现在试试这个看看能不能解决问题。

*ngFor 针对可迭代对象比针对函数更快