* ngForで作成された要素に#elementをバインドします

* ngForを使用して複数のdivを作成しています。私は彼らの一人に自分の手を渡してその幅を得たいと思っています。 elReferenceは未定義のままなので* ngForで作成された要素に#elementをバインドします

.html 
<div #elReference *ngFor="let el of elements> HEHE </div> 

.ts 
    @ViewChild("elReference") elReference: ElementRef;

どうやら、あなたは、* ngForとViewChild使用することはできません。

* ngForで作成された要素参照はどのように取得されますか？

2017-10-31 sanjihan

は、このスレッドを見てみましょます。https：/ /stackoverflow.com/questions/40165294/access-multiple-viewchildren-using-viewchild –

ありがとうございました。私は@ViewChildren（ "elReference"）を試しましたelReferences：QueryList ;ただし、elReferencesの値は未定義です。 – sanjihan

私はそれをonInit（）で使用しました。 ngAfterViewInitは必須です。 – sanjihan

は、選択的をテンプレート変数を追加する方法はありませんが、あなたはそれによって選択的にマーカーを追加してフィルタリングすることができます：

<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div>

ngAfterViewInit() { 
    console.log(this.elReference.toArray() 
     .filter(r => r.nativeElement.hasAttribute('foo'))); 
}

2017-10-31 11:21:57

Dankeschönを返します。これまでは、常にViewChildと#elReferenceをonInit（）の内部で使用してきました。この場合、なぜngAfterViewInitを使用する必要がありますか？ – sanjihan

'* ngFor'が' @Input（） 'に渡されるデータに依存する場合、それはまだレンダリングされません。 –

答えて