angular - ng-zorro cascader 延迟加载数据，nzLoadData 函数得到 this=undefined

Question

我想延迟加载 cacader 的数据。但是失败了，因为在加载函数中 this=undefined。该功能在组件中定义，并且组件中的其他功能运行良好。请帮忙，谢谢。

<nz-cascader  
  \[nzLoadData\]\="loadCityBuildingData"  
  \[(ngModel)\]\="selectedLocation"  
  (ngModelChange)\="onNewLocationModalChanges($event)"  
\> </nz-cascader>

loadCityBuildingData(node: NzCascaderOption, index: number): PromiseLike<void\> {  
  console.log(this);  

 return new Promise(resolve => {  
    if (index < 0) {  
      this.cityService.getCities().subscribe(item => {  
        const cities = \[\];  
  item.forEach(city => {  
          cities.push({value: city.id, label: city.name});  
  });  
  node.children \= cities;  
  resolve();  
  });  
  } else if (index === 0) {  
      this.buildingService.getBuildingsByCityId(node.value).subscribe(item => {  
        const buildings = \[\];  
  item.forEach(building => {  
          buildings.push({value: building.id, label: building.name, isLeaf: true});  
  });  
  node.children \= buildings;  
  resolve();  
  });  
  }  
  });  
}

Answer 1

我叫 Wendell，我是该组件的作者。;)

这是一个经常被问到的问题。原因是：

1. 当你传递loadCityBuildingData给 时nzLoadData，loadCityBuildData成为 的属性NzCascaderComponent。
2. 当级联调用此方法时（通过nzLoadData实际调用），thisinloadCityBuildingData绑定到任何内容。
3. 所以你必须this在loadCityBuildingData通过之前绑定。
   1. 您可以使用箭头功能。
   2. 你可以使用Function.bind.

Answer 2

我发现对我有用的解决方案是定义您的函数，如下所示：

loadCityBuildingData = (node: NzCascaderOption, index: number): PromiseLike<void> => {
    ...your code 
}