使用角度异步加载剑道树状视图

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[];
}

e.g。微调器不断滚动

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

Answer 1

简易解决方案：

变更

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

到

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