Question

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

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

功能名称是

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

Answer 1

请参阅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>

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

Answer 2

如果你能创建一个会做同样的指令会更好。您只需要将.as-console-wrapper { max-height: 100% !important; top: 0; }标志传递给指令，它将在最后一个元素被渲染时调用所需的函数。

查看

last

<强>指令

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

Plunkr in action

Answer 3

Pankay Parkar回答有效，但您需要在setTimeout函数中更改 lastElement 的编写（现在是 lastElem ，因此plunker无效检查是否是* ngFor的最后一个元素

完成* ngFor后调用函数

3 个答案: