完成* ngFor后调用函数

我试图用角度2创建应用程序;我想，当在* ngFor渲染的最后一个元素，执行功能，这样的事情，标签是<img>：完成* ngFor后调用函数

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

功能名称是

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

来源

2016-10-01 Bhawna

因为我设法想出解决办法见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。

来源

2016-10-01 06:43:57 ABabin

如果你可以创建一个指令来做同样的事情会更好。您只需将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

来源

2016-10-01 08:50:11

Pankay Parkar答案的作品，但是你需要改变的写作是以lastElement在setTi meout函数（现在是lastElem，所以重新启动不检查是否是* ngFor的最后一个元素）

来源

2017-11-16 16:46:32

完成* ngFor后调用函数

回答

相关问题