时间戳

首页 > 解决方案 > 最初加载远程数据时 Angular 组件出现问题

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

问题描述

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

ERROR 错误：无法读取 null 的属性“加入”

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

StackBlitz 示例

标签： angularkendo-ui

解决方案

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>

推荐阅读