Question

我有一个子组件CheckboxListComponent，它显示了一个复选框列表。该列表通过web服务调用填充在ngOnInit中，这需要花费更多或更少的时间。

它还有一个函数setEntryChecked来设置要检查的特定项目。在foo()拥有其数据之前调用CheckboxListComponent时，呼叫已丢失或无效。

我的解决方案是等待结果await this.listSubject.first().toPromise()。

在TypeScript中有更好的方法吗？

export class MainComponent {
  @ViewChild('checkboxList') checkboxListComponent: CheckboxListComponent;

  foo() {
    this.checkboxListComponent.setEntryChecked(..., true);
  }
 }

export class CheckboxListComponent implements OnInit  {
  list: [];

  private listSubject = new Subject<boolean>();

  async ngOnInit() {
    try {
      this.list = await this.dataService.get('url');
      this.listSubject.next(true);
    } catch (err) {
      this.listSubject.next(false);
    }

    this.listSubject = undefined;
  }

  async setEntryChecked(name: string, isChecked: boolean) {
    // wait for the list to be initialized
    if (this.listSubject) {
      await this.listSubject.first().toPromise();
    }

    // make the item checked
  }
}

Answer 1

这是一个应该通过更好的设计而不是各种角度编码技巧来解决的问题。我建议让/ a父组件请求数据并通过@Input参数将其提供给CheckboxListComponent。因此，一旦父需要，就可以使用CheckboxListComponent。

如果整个应用程序中存在多个呈现相同数据集的CheckboxListComponent组件实例，则尤其如此。

在Angular中等待数据的正确方法是什么？

1 个答案: