Angular ngFor生命周期 [英] Angular ngFor lifecycle

问题描述

我正在使用*ngFor迭代某些数据，如下所示:

I'm using *ngFor to iterate some data like this:

<div *ngFor="let d of [1, 2, 3]"> {{d}} </div>

一切都很好，我得到了预期的结果:

Everything is fine and I got the result as expected:

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

然后，我想知道是否使用函数而不是{{d}}，所以我写了一个函数:

Then, I wondered if I use a function instead of {{d}}, so I wrote a function:

protected logAndReturn(item) {
    console.log(item);
    return item;
}

我用过它:

<div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div>

我得到的渲染HTML结果与第一个代码相同，但是控制台输出不是我的预期输出. 控制台输出:

I got the same rendered HTML result as the first code, but console output wasn't my expected output. Console output:

1
2
3
1
2
3

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

1
2
3
1
2
3

添加的函数现在已被调用12次(每项4次)

The added function was called 12 times now (4 time for each item)

以下是您可以自己对其进行测试的代码: jsfiddle

Here is the code that you can test it yourself: jsfiddle

我的代码错误吗?有什么解决方案可以防止这些额外的电话吗?为什么会发生这种情况，有人可以解释一下吗?

Is my code wrong? Is there any solution to prevent these extra calls? Why did this happen and can anybody explain it a little?

推荐答案

在视图中使用方法与使用不纯管道相同.该代码将在视图上的每个事件中执行，这可能会很多次.在我们的示例中，logAndReturn()方法仅返回一个数字，因此可以假定它在视图中运行，但是如果它执行更复杂的操作，则可能是性能的大问题.使用简单的程序，您可以检查console.log以查看在哪一步中打印了"logAndReturn"的踪迹.这是新组件的外观:

using methods in the view is the same that using impure pipes. This code will be executed in each event on the view, which can be a lot of times. In our example, the logAndReturn() method only returns a number so it can be assumable to run it in a view but if it would do something more complex, it could be a big problem of performance. with a simple program you can check console.log to see in which step the trace of "logAndReturn" is printed. This is the look of the new component:

export class AppComponent implements 
OnChanges,
OnInit,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
{
  private var01: string = "default value";
  constructor( private trans: TranslatorService ){}
  ngOnChanges (){
     console.log('Trace OnChanges');
  }
  ngOnInit (){
     console.log('Trace onInit');
  }
  ngDoCheck (){
     console.log('Trace doCheck');
  }
  ngAfterContentInit(){
     console.log('Trace After Content Init');
  }
  ngAfterContentChecked(){
     console.log('Trace after contente checked');
  }
  ngAfterViewInit(){
     console.log('Trace after view init');
  }
  ngAfterViewChecked(){
     console.log('Trace after view checked');
  }
  ngOnDestroy(){
     console.log('Trace on destroy');
  }
  testRender() {
    console.log('trace 01');
    return 'This is a test that runs a console log'
  }
  (...)
}

要深入了解此处实际发生的情况，请阅读Angular 2的官方文档，以了解生命周期

To go deeper in what really is happening here, read the official documentation of Angular 2 about the life cycle

这篇关于Angular ngFor生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！