Angular 2 を使用してアプリケーションを作成しようとしています。*ngFor で最後の要素がレンダリングされたときに、次のような関数を実行したいです。
<ul>
<li *ngFor="#i of items">{{i.text}}</li> <==== i want when this completed, execute a functuon in my class
</ul>
ありがとう。
ベストアンサー1
アップデート
@ViewChildren
その目的のために使用できます
3つのケースがある
1.初期化要素は、その要素またはその親要素がngFor
原因でレンダリングされません。ngIf
- その場合、真実になったときはいつでも、サブスクリプション
ngIf
によって通知されますViewChildren
2.初期化時に要素は、その要素またはその親ngFor
に関係なくレンダリングされます。ngIf
- この場合、
ViewChildren
サブスクリプションは初回は通知しませんが、フックでレンダリングされることは確実ですngAfterViewInit
。
3.ngFor
配列にアイテムが追加/削除される
- その場合も
ViewChildren
サブスクリプションで通知されます
[プランカーデモ] (コンソールログを参照してください)
@Component({
selector: 'my-app',
template: `
<ul *ngIf="!isHidden">
<li #allTheseThings *ngFor="let i of items; let last = last">{{i}}</li>
</ul>
<br>
<button (click)="items.push('another')">Add Another</button>
<button (click)="isHidden = !isHidden">{{isHidden ? 'Show' : 'Hide'}}</button>
`,
})
export class App {
items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
@ViewChildren('allTheseThings') things: QueryList < any > ;
ngAfterViewInit() {
this.things.changes.subscribe(t => {
this.ngForRendered();
})
}
ngForRendered() {
console.log('NgFor is Rendered');
}
}
オリジナル
次のようにすることもできます(ただし、副作用を自分で調べる)
<ul>
<li *ngFor="let i of items; let last = last">{{i}} {{last ? callFunction(i) : ''}}</li>
</ul>
それは使い物にならない、一緒に使用しない限り変更検出戦略.OnPush
そうすれば、変更検出が何回発生するか、つまり関数が何回呼び出されるか制御できるようになります。
例:changeDetection
データが変更されたときに次のトリガーをトリガーすることができitems
、関数はngFor
レンダリングされた適切な指示を提供します。本当の変化。