web-dev-qa-db-ja.com

QueryListの変更サブスクライブが機能しない

コンポーネントにQueryListがあります。 QueryListに存在する他のコンポーネントを動的に追加していますが、changesのQueryListをサブスクライブしても、何も起こりません。 ngAfterViewInitでサブスクライブしたためだと思いましたが、QueryListはundefinedですがngOnInitです。 ここにプランカーがあります 。

コード：

@Component({
  ...
})
export class AppComponent {

    @ViewChildren(ControlFactoryDirective) factories:
        QueryList<ControlFactoryDirective>

    ngAfterViewInit() {
      this.factories.changes.subscribe(() => {
        console.log('changed')
      })
    }
}
angulartypescripteventemitter
7
István

重要なのは、factoriesプロパティに来るリストはすでに事前入力されているということです。したがって、初めて入力される前に変更をサブスクライブする機会がありません。ただし、後で発生するすべての変更は、もちろんサブスクライバーに反映されます。

これが plunkr で、例が更新されています-ファクトリに、事前入力されていることを証明するセッターがあることに注意してください（通常、実際のアプリでは必要ありません。これは、どの値が由来するかを調べるためのものです。枠組み）

それは完全に有効な動作だと思います。したがって、ngAfterViewInitで、QueryListの値をループし、サブスクライバーで実行しようとしているのと同じことを実行します。

ngAfterViewInit() {
  this.processChildren(); // first call to processChildren

  this.factories.changes.subscribe(_ => 
      this.processChildren() // subsequent calls to processChildren
  );
}

private processChildren(): void {
  console.log('Processing children. Their count:', this.factories.toArray().length)
}
11
Mikha

クエリリスト内のオブジェクトに変更を加えた後、クエリリストを呼び出して変更を通知する必要があります。

update() {
  this.factories.forEach(factory => {
    console.log(factory.componentRef.instance.model.data = "alma")
  //  factory.()
  this.factories.notifyOnChanges();
  })
}
3
Roman C