角度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');}
を参照してくださいthis Plunkerです。
エレガントではないかもしれませんが、（ほとんど）機能します！
基本的に、*ngForは、インデックス、偶数、奇数、幸いなことに、それぞれの反復で真と評価される最初と最後のブール値のように役に立ちます。まず、*ngForの値をローカル変数として、インデックスとまったく同じように公開する必要があります。次に、テンプレートから関数を呼び出すためにAngularを呼び出さなければなりません。これは、テンプレートに値をバインドしているが、3番目の条件付き（false評価の場合はnullを返す）の場合と同じです。
<div *ngFor="let i of stuff; let l = last ">
{{ i }} {{ l === true ? callOnLastIteration() : null}}
</div>
私は「作品（主に）」と言う、あなたが、*ngFor -ed要素の内部プロパティにバインドあなたはに反復されているもの以外の、その後の値を変更しようとすると思われるので、最後の反復で呼び出された関数の内部プロパティは、Angularの変更伝播システムから望ましくない動作やエラーを受け取ります。詳細については、Plunkerを参照してください。
同じことをするディレクティブを作成することができればよいでしょう。ディレクティブにフラグ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);
}
}
Pankay Parkar回答作品が、あなたはsetTiでlastElementの書き込みを変更する必要がありますmeout関数（今はlastElemなので、plunkerは* ngForの最後の要素であるかどうかを調べることができません）