テンプレート内のコントロールをイベントリスナーに登録するにはどうすればよいですか？

Question

テンプレートの一部のコンポーネントにこのようにタグを追加しました。

<div>...</div> 
<div #blopp>...</div> 
<div>...</div> 
<div #blopp>...</div> 
<div #blopp>...</div> 
<div>...</div> 

これもクラス定義で行います。

export class NavBar { 
    @ViewChildren("blopp", { read: ElementRef }) blopps: QueryList<ElementRef>; 
    constructor() { console.log("NavBar created"); } 
    ngAfterViewInit() { debugger; } 
} 

次のスクリプトを使用して、デバッガの要素を反復処理できます。しかし、私はそのようなメソッドが存在しないというエラーが出るので、ただon(event,action)を使うことはできません。

blopps.forEach((element)=>{...}); 

グーグルは私についてblopp.listener(...)何かを与えたが、私のクエリリストがその方法どちらを持っていないようです。現時点では、私はうまく指向していると感じていないので、むしろ明白なものかもしれません。何が欠けていますか、テンプレートのコントロールにイベントを追加するにはどうしたらいいですか？

Answer 1

フィールドbloppがQueryList型を持つ、それはこの例のように処理されるべきであることを意味します

constructor(private renderer:Renderer){} 

//AfterViewInit interface 
ngAfterViewInit() { 
    blopps.forEach(elementRef => { 
    this.renderer.listen(elementRef.nativeElement, 'click', (e) => console.log(e)); 
    }); 
} 

Answer 2

あなたは変化を購読し、タイプを指定する必要があります。

this.blopps.changes.subscribe(children => { 
     //note that children is a collection so you can do foreach here 
     children.last.nativeElement.focus(); 

     // console.log(children.first['_results'][0].nativeElement);           
     console.log(children.first);           

     // Do Stuff or wire with referenced element here... 
    }); 

Answer 3

あなたは反復処理できる配列を取得するためにtoArray()を呼び出す必要があります：私は正しくメッセージが出ていた場合

blopps.toArray().forEach((element)=>{...});