完成 *ngFor 后调用函数答案

【问题标题】：Call a function after completing the *ngFor完成 *ngFor 后调用函数
【发布时间】：2017-02-09 17:15:03
【问题描述】：

我正在尝试使用 angular 2 创建一个应用程序；我想在 *ngFor 中呈现最后一个元素时，执行一个函数，像这样，标签是<img>：

<img *ngFor="let image of template.previewImages; let i = index" [src]="image" [class.hs_visible]="i==0" />

函数名是

animation(){console.log('enter');}

【问题讨论】：

标签： angular ngfor

【解决方案1】：

请参阅 this Plunker 了解我想出的解决方案。

它可能并不优雅，但它（大部分）有效！

基本上，*ngFor 提供了一个 handful of values 类似的索引，偶数，奇数，幸运的是，第一个和最后一个布尔值在各自的迭代中计算为真。首先，您必须将值公开为*ngFor 中的局部变量，就像索引一样。然后，您必须让 Angular 从模板中调用该函数，您可以像将值绑定到模板但使用第三条件（对于错误评估返回 null）一样执行此操作。

<div *ngFor="let i of stuff; let l = last ">
  {{ i }} {{ l === true ? callOnLastIteration() : null}}
</div>

我说“（大部分）有效”，因为似乎如果您尝试绑定到 *ngFor-ed 元素内的属性，除了您正在迭代的属性然后如果在最后一次迭代中调用的函数中更改所述属性的值，您将从 Angular 的更改传播系统中获得不希望的行为和错误。有关详细信息，请参阅 Plunker。

【讨论】：

【解决方案2】：

如果你能创建一个指令来做同样的事情会更好。您只需将last 标志传递给指令，它会在最后一个元素被渲染时调用所需的函数。

查看

<p class="my-element" 
  *ngFor="let i of stuff; let l = last" 
  [lastElement]="l" (lastFunc)="test()">
    {{i}}
</p>

指令

import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[lastElement]'
})
export class LastElementDirective {
  @Input() lastElement : any;
  @Output() lastFunc = new EventEmitter();
  constructor(private el: ElementRef) { 
    this.setTimer(); //somehow lastElem value is available on next tick
  }
  setTimer(){
    setTimeout(() => {
      if(this.lastElem) this.lastFunc.emit();
    }, 0);    
  }
}

Plunkr in action

【讨论】：

【解决方案3】：

Pankay Parkar 答案有效，但是你需要在 setTimeout 函数中更改 lastElement 的写法（现在是 lastElem，所以 plunker 无法检查是否是 *ngFor 的最后一个元素)

【讨论】：