Question

我正在使用Kendo TreeView控件，并且遇到了以下问题。我创建了一个使用剑道树视图的可重用组件，并传递了包含所有节点以及包含所有选定键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组件存在问题

1 个答案: