使用 Angular 异步加载分层 Kendo Treeview

Question

我正在尝试从外部源加载分层树视图，但我在加载第一个节点子节点时遇到困难，而且最有可能加载内部子节点（但这我还不知道..）。

数据是通过axios加载的，所以RxJS的Observable方法是行不通的。我尝试了很多不同的东西，但是当我扩展第一个节点时，微调器一直在旋转直到永远。

我尝试过的一些点

试图将 parent 节点分配给孩子
尝试了异步修饰符
用 hasChilderen 函数尝试了很多不同的东西

希望有人能指出我正确的方向。

我的代码：

tree.component.html

<kendo-treeview [nodes]="locations | async" [textField]="['shortName']" kendoTreeViewExpandable
  [hasChildren]="hasChildren.bind(this)" [children]="fetchChildren.bind(this)">
</kendo-treeview>

tree.component.ts

export class TreeComponent implements OnInit {
  public locations: Promise<Location[]>

  constructor(private locationService: LocationService,
    private cdRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.locations = this.locationService.getBaseLocation();
  }

  public hasChildren = (item: Location): boolean => item.hasChildLocations;

  public fetchChildren = (item: Location): Promise<Location[]>  => this.locationService.getChildLocations(item.locationId);
}

location.service.ts

export class LocationService {
  async getBaseLocation(): Promise<Location[]> {
    return await axios.get<Location>('/Location/GetBaseLocation')
      .then((response: AxiosResponse<Location>) => {
        return [response.data];
      });
  }

  async getChildLocations(locationId: string): Promise<Location[]> {
    return await axios.get<Location[]>(`/Location/GetLocationTree?UpperLocationID=${locationId}`)
      .then((response: AxiosResponse<Location[]>) => response.data);
  }
}

location.model.ts

export interface Location {
    locationId: string;
    upperLocationId: string;
    locationTypeId: number;
    shortName: string;
    plantCode: string;
    hasChildLocations: boolean;

    icon: string;
    isSelected: boolean;

    childeren: Location[];
}

例如微调器一直滚动

控制台在我的孩子从外部服务加载之前打印出一个错误，所以我的 5 美分是因为 angular 试图在加载节点之前扩展节点。

Answer 1

简单的解决方案：

改变

public fetchChildren = (item: any) this.locationService.getChildLocations(item.locationId);

至

  public fetchChildren = (item: any) => from(this.locationService.getChildLocations(item.locationId));

使用 Angular 异步加载分层 Kendo Treeview

Async Loading of Hierachical Kendo Treeview using Angular

async-await

axios

kendo-ui-angular2

angular8