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

我发现一个对我有用的解决方案是像下面这样定义你的函数：

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

Answer 2

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

这是一个常见问题。原因是：

当您将 loadCityBuildingData 传递给 nzLoadData 时，loadCityBuildData 变成 NzCascaderComponent 的属性。
当cascader调用该方法时（实际调用nzLoadData），loadCityBuildingData中的this不绑定
所以你必须在loadCityBuildingData中绑定this，然后才能通过它。
1. 你可以使用箭头函数。
2. 你可以使用 Function.bind.

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

ng-zorro cascader lazy load data, nzLoadData function got this=undefined

angular

ng-zorro-antd