Асинхронная загрузка иерархического представления дерева кендо с использованием Angular

Question

Я пытаюсь загрузить иерархическое древовидное представление из внешнего источника, но у меня возникают трудности при загрузке дочерних узлов первого узла и, скорее всего, внутренних дочерних узлов (но этого я пока не знаю ...).

Данные загружаются через axios, поэтому методы RxJS Observable не будут работать.Я пробовал разные вещи, но когда я расширяю первый узел, спиннер продолжает вращаться до бесконечности.

Некоторые из точек, которые я пробовал

• Попытка присвоитьродительский узел с детьми
• Пробовал асинхронный модификатор
• Пробовал много разных вещей с функцией 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[];
}

например, Spinner продолжает вращаться

консоль выводит сообщение об ошибке до того, как мойchilds загружаются из внешнего сервиса, поэтому мои 5 центов связаны с тем, что angular пытается расширить узлы до их загрузки.

Answer 1

Простое решение:

Изменить

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

на

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