Angular 5-调用1000次的函数[重复]答案

【问题标题】：Angular 5 - function called 1000 times [duplicate]Angular 5-调用1000次的函数[重复]
【发布时间】：2018-11-28 09:01:43
【问题描述】：

我有一个简单的数组，里面有 6 个对象。 http://prntscr.com/jwp54d

我做了一个简单的*ngFor=""，它应该并且确实显示了 6 行。

<ng-container *ngFor="let rec of deal.recycles">
    <div *ngIf="checkReasonFilter(rec)" class="row" routerLink="/company" [queryParams]="{id: deal.withCompany}" fragment="recycled" >

我在checkReasonFilter(rec) 函数中添加了一个计数器，在加载时它被调用672 次strong>！

如何，为什么？有人知道吗？

函数只调用一次，在这里！

谢谢！

【问题讨论】：

*ngIf 在渲染时不仅在每个更改检测循环中调用一次，因此您的函数在每次更改检测中被调用 6 次，因此总和
不鼓励在绑定中使用函数，您的函数将在每个更改检测周期被调用，并且在开发模式下 Angular 运行 x2 个周期。

标签： angular

【解决方案1】：

Magor，当你得到 deal.recycles 时，你可以映射数组

deal.recycles=dealrecycles.map(rec=>{

        return {
           ...rec,  //<---all the properties of rec
           show:checkReasonFilter(rec)   //<--anohter one
        }
    })

所以，你有一个新属性“show”，你可以在 *ngFor 中使用它

【讨论】：

【解决方案2】：

因为每次角度运行时都会调用摘要循环函数。如果函数具有复杂的逻辑，则在 ngIf 条件中添加函数不是一种常见的做法。

解决此问题的最佳方法是在 ngIf 中添加一个变量，然后在该函数中执行任何操作，将最终结果分配给新创建的变量

【讨论】：