Angular – @ViewChildrenでngFor内の要素のリファラーを取得
ngForのループで複数の要素を書き出す場合、それぞれに「#name1」などのアンカーを付けて@ViewChildで取得したかったが以下のようにはできなかった。
<!-- こんなことはできない --> <div *ngFor="let item of items; let i = index"> <div #item{{i}}></div> </div>
Contents
@ViewChildrenを使う
当然このようなケースを扱うためのプロパティは用意されていた。
以下のようにするとForの中の要素を取得できる。
<div *ngFor="let item of items; let i = index"> <div #items></div> </div>
そしてts側で以下のように取得
export class Page { @ViewChildren('items') items: QueryList; }
この時、itemsはQueryList型になっているが、以下のように配列化してindex指定でRefを取得することができる。
export class Page { @ViewChildren('items') items: QueryList; ngOnInit() { this.items.toArray() } }
ディスカッション
コメント一覧
まだ、コメントがありません