完成*ngFor后调用函数

Question

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

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

功能名称是

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

Answer 1

请参阅此 Plunker，了解我设法想出的解决方案。

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

基本上，*ngFor它可以提供一些有用的值，例如索引、偶数、奇数，幸运的是，第一个和最后一个布尔值在各自的迭代中评估为 true。首先，您必须将值公开为局部变量，就像*ngFor索引一样。然后，您必须让 Angular 从模板调用该函数，您可以像将值绑定到模板一样，但使用第三条件（对于错误评估返回 null）。

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

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