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. 当 cascader 调用此方法时(通过实际调用 nzLoadData)，loadCityBuildingData 中的 this 不绑定(bind)任何内容。
3. 因此在传递之前，您必须在 loadCityBuildingData 中绑定(bind) this。
   1. 你可以使用箭头函数。
   2. 您可以使用 Function.bind。