基于角的Kendo树视图的异步加载

Question

我试图从外部源加载分层树视图，但是加载第一个节点childs时遇到了困难，最容易加载的是内部childs (但这一点我还不知道)。

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

我尝试过的一些观点

childeren

• Tried试图为父节点分配异步修饰符

• 尝试使用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分钱是基于这样一个事实:角试图在节点加载之前展开它们。

​

Answer 1

简单的解决办法：

变化

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

至

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