Async await 基于角度的层次剑道树视图异步加载

我试图从外部源加载分层树状视图，但在加载第一个节点子节点和最可能的内部子节点时遇到困难（但我还不知道这一点）

数据是通过axios加载的，因此RxJS可观察方法无法工作。我尝试了不同的方法，但是当我扩展第一个节点时，旋转器会一直旋转直到永恒

我试过的一些观点

• 试图将子节点分配给父节点
• 尝试了一个异步修饰符
• 用hasChilderen函数尝试了许多不同的事情

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

我的代码：

tree.component.html

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

e、 旋转器不停地转动

console在从外部服务加载我的孩子之前打印出一个错误，所以我的5美分是因为angular正在尝试在加载节点之前扩展节点。 简易解决方案：

改变

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

到

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);
  }
}

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

    icon: string;
    isSelected: boolean;

    childeren: Location[];
}

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

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