*ng 用于在 angular2 中运行无限循环 [英] *ngFor running an infinite loop in angular2

问题描述

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

<li *ngFor="let element of componentModel | keys;let i=index">{{element.key}}--{{element.value}}//1---Bhushan...只加载一次<span *ngIf="element">{{ loadProperty(i,element) }}</span>

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

loadProperty(i:number,element:any){console.log(element.key+'========'+element.value);控制台日志(元素)；}

表示浏览器输出

<块引用>

(1---布山)

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

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

有任何输入吗?

解决方案

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

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

I am trying to render object properties using keys in angular2 using below code:

<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>

But I am facing a problem here. The output in the browser in loaded only once. but the method call i.e. loadProperty(i,element) is running in an infinite loop.

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

means on browser output

(1---Bhushan)

is displayed only once but on the console its running infinitely like below:

I want to call this method only once per iteration.

any inputs?

解决方案

This is just Angular2 change detection at work calling loadProperty(i,element) over and over in each change detection cycle.

Calling methods from the template is discouraged because they are called very often. You should instead store the result in a property and bind to this property instead.

这篇关于*ng 用于在 angular2 中运行无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！