Данные ленивой загрузки каскада ng-zorro, функция nzLoadData получила это = undefined

Я хочу лениво загружать данные для 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();  
  });  
  }  
  });  
}

angular ng-zorro-antd
person ZhaoGuoXin    schedule 20.02.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

  1. Когда вы передаете loadCityBuildingData в nzLoadData, loadCityBuildData становится свойством NzCascaderComponent.
  2. Когда каскад вызывает этот метод (фактически вызывая nzLoadData), this в loadCityBuildingData ни к чему не привязывается.
  3. So you have to bind this in loadCityBuildingData before you pass it.
    1. You could use arrow function.
    2. Вы можете использовать Function.bind.
person Wendell    schedule 30.03.2020

arrow_upward
2
arrow_downward

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

loadCityBuildingData = (node: NzCascaderOption, index: number): PromiseLike<void> => {
    ...your code 
}
person Hugo Ribiere    schedule 14.03.2020