nz-zorro cascader ленивая загрузка данных, функция nzLoadData получила это = неопределено - PullRequest
1 голос
/ 20 февраля 2020

Я хочу ленивую загрузку данных для cacader. Но не удалось, потому что в функции загрузки это = неопределено. Функция определяется в компоненте, и другие функции в компоненте работают хорошо. Пожалуйста, помогите, спасибо.

<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();  
  });  
  }  
  });  
}

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Меня зовут Венделл, и я являюсь автором компонента. ;)

Это часто задаваемый вопрос. Причина в том, что:

  1. Когда вы передаете loadCityBuildingData в nzLoadData, loadCityBuildData становится свойством NzCascaderComponent.
  2. Когда каскад вызывает этот метод ( вызов nzLoadData на самом деле), this в loadCityBuildingData ничем не связан.
  3. Так что вы должны связать this в loadCityBuildingData, прежде чем передать его.
    1. Вы можете использовать функцию стрелки.
    2. Вы можете использовать Function.bind.
0 голосов
/ 14 марта 2020

Решение, которое я нашел и которое работает для меня, заключается в определении вашей функции следующим образом:

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