*ngFor 在 angular2 中运行无限循环

Posted

技术标签:

【中文标题】*ngFor 在 angular2 中运行无限循环【英文标题】:*ngFor running an infinite loop in angular2 【发布时间】:2016-10-18 23:52:06 【问题描述】:

我正在尝试使用以下代码使用 angular2 中的键来呈现对象属性:

<ul>
    <li *ngFor="let element of componentModel | keys;let i=index">
      element.key--element.value  // 1---Bhushan...loaded only once
      <span  *ngIf="element"> loadProperty(i,element) </span>
    </li>
</ul>

但是我在这里遇到了一个问题。浏览器中的输出仅加载一次。 但是方法调用,即loadProperty(i,element) 正在无限循环中运行。

loadProperty(i:number,element:any)       
    console.log(element.key+'========'+element.value);
    console.log(element);      

表示浏览器输出

(1---布山)

只显示一次,但在控制台上它会无限运行,如下所示:

我想每次迭代只调用一次这个方法。

任何输入?

【问题讨论】:

【参考方案1】:

这只是工作中的 Angular2 更改检测,在每个更改检测周期中一遍又一遍地调用 loadProperty(i,element)

不鼓励从模板调用方法,因为它们经常被调用。您应该改为将结果存储在属性中并绑定到该属性。

【讨论】:

我不确定如何使用属性绑定来执行此操作,您是否有任何 plnkr 方法将在每次迭代中仅调用一次? @Gunter 你想完成什么?听起来像***.com/questions/36427670/… 几乎相同,但我也想将迭代元素传递给方法。实际上这些元素是对象,我根据每个元素的类型为每个元素提供一个编辑器以更改其值。 IE。如果它是一个由数组组成的对象,那么它将加载 objectEditorComponent 并在其中为每个数组加载 arrayEditorComponent。因此我使用 *ngFor 进行迭代并将迭代的元素传递给函数以根据其数据类型选择正确的编辑器。它是一个递归过程,直到它得到最后一个元素。 究竟是哪一部分给你带来了麻烦? 这正是链接答案中的指令应该做的。 &lt;span *ngIf="element" (onCreate)="loadProperty(i, element)"&gt;&lt;/span&gt; 应该做你想做的。

以上是关于*ngFor 在 angular2 中运行无限循环的主要内容,如果未能解决你的问题,请参考以下文章

Angular2中嵌套ngFor循环的计数器

Angular2 ngFor如何计算循环值的数量?

在 Angular 2 中打破 NgFor 循环

ngFor 中的 Angular2 组件抛出错误(viewFactory 不是函数)

如何将 ngFor 循环的索引值传递给组件? [复制]

当我尝试迭代 ngFor 循环时,Angular 2+ attr.disabled 不适用于 div