angular – 在完成* ngFor后调用函数

我正在尝试用角度2创建一个应用程序;我想要在* ngFor中渲染最后一个元素时,执行一个函数,像这样,标签是< img>：

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

功能名称是

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

解决方法

有关我设法提出的解决方案,请参阅 this Plunker.

它可能不是很优雅,但它(大部分)都有效！

基本上,* ngFor提供了一个handful of values,就像索引一样,偶数,奇数,幸运的是,第一个和最后一个布尔值,对于各自的迭代求值为true.首先,您必须将值作为局部变量在* ngFor中公开,就像索引一样.然后,您必须让Angular从模板调用该函数,您可以这样做,就像您将值绑定到模板但使用三级条件(对于错误的计算返回null).

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

我说“(大多数)工作”因为看起来如果你试图绑定到* ngFor-ed元素内的属性,而不是你正在迭代的那个属性,然后在调用的函数内改变所述属性的值在最后一次迭代中,您将从Angular的变更传播系统中获得不希望的行为和错误.有关详细信息,请参阅Plunker.