从 html 调用的 Angluar get 方法会导致无限重新加载循环

Question

我目前正在做一个项目，这需要我用指向 douments 的链接填充动态数量的按钮才能打开它们。

<tr *ngFor="let competence of competences; let i = index">{{competence.name.de}}
<td *ngFor="let competenceLevel of levels; let j = index">
<button type="button" *ngFor="let learnRecommendation of getLearnRecommendationsByIndex(i,j)" (click)="openDialog(learnRecommendation)">{{learnRecommendation.title | translateText}}</button>
</td>
</tr>

这正确地用按钮填充了表格并播放了正确的名称，但是我尝试添加到按钮的事件不起作用。我需要(单击(，但已经尝试了诸如(加载(之类的东西进行测试，但这些也不起作用。 我最终注意到，所有的按钮都在无限地重新加载。一位朋友告诉我，他认为它可以连接到我使用的 get 方法，但我看不出如何。非常感谢对此的任何帮助。

Answer 1

这是角度变化检测的问题。

Angular 无法检测getLearnRecommendationsByIndexis的结果是否更改，直到它运行getLearnRecommendationsByIndexfunction。

这就是为什么它需要在每个更改检测周期中执行它，以便获取返回值并确保没有任何更改。

如果您使用吸气剂或二传手，情况也是如此。当您的函数从 https 调用返回集合时，这尤其麻烦，因为调用将在每个周期发生一次，使应用程序无响应。

更糟糕的是？即使返回的值相同，如果它们是新对象(因为可观察量会返回(，角度假设有变化并且 dom 被重建。

若要避免这种情况，可以使用OnPush更改检测策略

例：

@Component({
selector: 'some-selector',
templateUrl: 'someurl' ,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushDetComponent { 
constructor(private cdr: ChangeDetectorRef) {
}
runChangeDetection() {
this.cdr.detectChanges();
}
}

请记住，您的视图只会在运行更改检测时更新，而不会自动更新。

您可以做的另一件事是捕获数组的返回值并在视图上使用该数组。