Angular：数据绑定组件变量超出范围后

Question

我面临一个奇怪的问题。 请参考以下代码。

//页面级变量

nonAuthorizedResponse: INonAuthorizedResponse;
authorizedResponse: IAuthorizedResponse;
borrowersNonAuthorized: IBorrower[];
borrowersNonAuthsFiltered: IBorrower[];
authorizedData: IAuthorizedData[];

ngOnInit() {
// Get Data From Server
this.getDataFromServer();

//Setting Paging Data Source
this.setPagingSourceAfterDataLoad();
}

以下是对服务器的调用：-

getDataFromServer(){
    this.nregMainPageHttpService.getBorrowListForMyActiveProfiles().subscribe(
      data => {
        this.nonAuthorizedResponse = data;
        this.borrowersNonAuthorized = this.nonAuthorizedResponse.borrowers;
        this.totalRecords = this.nonAuthorizedResponse.totalRecords;
      },
      error => this.errorMessage = <any>error, () => { }
    );
 }

方法如下：

setPagingSourceAfterDataLoad(){
// this.borrowersNonAuthorized is showing undefined on debugging
if (this.borrowersNonAuthorized && this.borrowersNonAuthorized.length > 0) {
  this.nregMainPageBusinessLogicService.setPagingSourceProperties(this.totalRecords, this.pagingSourceForBorrowLevel);
}
}

第二个呼叫获得了寻呼组件。 此调用在getDataFromServer() ；

修改版本：

ngOnInit() {
// Get Data From Server
this.getDataFromServer();

// code commented moved inside getDataFromServer()
//this.setPagingSourceAfterDataLoad();
}

getDataFromServer(){
    this.nregMainPageHttpService.getBorrowListForMyActiveProfiles().subscribe(
      data => {
        this.nonAuthorizedResponse = data;
        this.borrowersNonAuthorized = this.nonAuthorizedResponse.borrowers;
        this.totalRecords = this.nonAuthorizedResponse.totalRecords;
        // call added
        this.setPagingSourceAfterDataLoad();
      },
      error => this.errorMessage = <any>error, () => { }
    );
 }

现在分页组件可以工作了。

我无法理解为什么变量this.borrowersNonAuthorized变为“未定义”的问题

最好的问候，悉德

Answer 1

this.getDataFromServer()不是async操作吗？ 正如johnny在他的评论中提到的那样，在服务器回调之前填充您的方法this.setPagingSourceAfterDataLoad()并填充您的数据...

要解决此问题，您将必须await服务器调用完成。

假设您正在使用Angular HttpClient进行服务器调用，则必须使用.toPromise()或订阅回调。

类似于以下内容：

1）如果getDataFromServer返回一个promise

this.getDataFromServer().then(() => {
    this.setPagingSourceAfterDataLoad();
}

2）如果getDataFromServer返回一个可观察的

this.sub = this.getDataFromServer().subscribe(() => {
    this.setPagingSourceAfterDataLoad();
}

更新：如下面的注释中所建议，当一个服务器调用依赖于另一个时，您应该将它们链接在一起。 修改后的作品是有效的，因为您在getDataFromServer订阅中调用setPagingSourceAfterDataLoad 。

至于为什么您的未定义borrowersNonAuthorized未授权，我将调试您的代码，并确保数据具有属性borrower ，我想这是未定义的。

尽管上面的示例有效，但是它存在缺陷，因为它将导致内存泄漏 。 您需要保留对您的订阅的引用，并在完成后退订。 如果您不取消订阅，则每个订阅将继续监视更改 。

基于以上代码，我建议进行以下小的修改。

ngOnInit() {
    // Get Data From Server
    this.sub = this.getDataFromServer();
}

ngOnDestroy() {
    this.sub.unsubscribe();
}

getDataFromServer(){
    return this.nregMainPageHttpService.getBorrowListForMyActiveProfiles().subscribe(
  data => {
    this.nonAuthorizedResponse = data;
    this.borrowersNonAuthorized = this.nonAuthorizedResponse.borrowers;
    this.totalRecords = this.nonAuthorizedResponse.totalRecords;
    // call added
    this.setPagingSourceAfterDataLoad();
  },
  error => this.errorMessage = <any>error, () => { }
  );
}