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成为“未定义”的问题

最好的问候， SIDD

Answer 1

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

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

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

类似以下内容：

1）如果getDataFromServer返回承诺

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

2）如果getDataFromServer返回可观察的

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

更新：正如下面的评论中所建议的，当一个服务器调用依赖于另一个时，您应该将它们链接在一起。修改后的工作原理是因为您在setPagingSourceAfterDataLoad订阅中调用了getDataFromServer。

至于为什么你的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, () => { }
  );
}

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

1 个答案: