最初加载远程数据时 Angular 组件出现问题

Question

我正在使用 Kendo TreeView 控件，我运行遇到了以下问题。我创建了一个使用 kendo 树视图的可重用组件，我传递了包含所有节点的 table 以及包含所有选定键 guid 的数组。当我将选定的键作为静态数组传递时，我没有得到错误，如果我告诉它从后端获取数据 api 我得到以下错误

错误错误：无法读取 null

的属性 'join'

我确信这与尝试访问尚不存在的数据的组件有关。所以不确定我将如何告诉组件等待它。

StackBlitz Sample

Answer 1

您可以使用 ngIf 指令在数据到达时有条件地呈现组件。

<app-kendo-tree
  *ngIf="selectedNodes$ | async as selectedNodes"
  [nodes]="data"
  [checkedKeys] = "selectedNodes"
  [checkBox] = true

></app-kendo-tree>

要有条件地等待多个请求，我建议使用 combineLatest:

vm$: Observable<{ data: any; selectedNodes: [] }>;

ngOnInit() {
    const data$ = this.getAllMenuItems();
    const selectedNodes$ = this.getAllSelectedNodes().pipe(shareReplay());
    this.vm$ = combineLatest([data$, selectedNodes$]).pipe(
      map(([data, selectedNodes]) => ({ data, selectedNodes }))
    );
  }

<app-kendo-tree *ngIf="vm$ | async as vm"
  [nodes]="vm.data"
  [checkedKeys] = "vm.selectedNodes"
  [checkBox] = true

></app-kendo-tree>

最初加载远程数据时 Angular 组件出现问题

Problem with Angular component when initially loading Remote Data

kendo-ui

angular