未捕获（承诺中）类型错误：无法将未定义或 null 转换为对象 - 角度 9答案

【问题标题】：Uncaught (in promise) TypeError: Cannot convert undefined or null to object - angular 9未捕获（承诺中）类型错误：无法将未定义或 null 转换为对象 - 角度 9
【发布时间】：2021-12-17 00:43:54
【问题描述】：

我有一个调用 API 以返回 JSON 的服务调用。然后我有一个调用服务调用的订阅函数。 JSOON 很好地返回，服务调用和订阅所有工作。但是，在其构建管道中构建我的应用程序时，我收到以下错误 "Uncaught (in promise) TypeError: Cannot convert undefined or null to object." 我的构建失败（即使它工作正常本地并通过所有测试）。我正在使用 Angular 9 和打字稿。

我的订阅和它的功能如下所示：


houseData: HouseValueObject;
houseNumber = '12345';

callHouseService() {
   this.streetHouseService.getHouseData(this.houseNumber).subscribe(
     async (data) => {
       this.houseData = await data;
       const keys = Object.keys(this.houseData.extensiveHouseData);
       this.extensiveHouseDataList = keys.map(k => this.houseData.extensiveHouseData[k]);
}
)
}

getHouseData 方法如下所示：

export class HouseService {
  private readonly relativeURL = 'services/api/houseinfo/'
  
  constructor(private http: HttpClient) {
  
  getHouseData(houseNumber: string): Observable<HouseValueObject> {
   return.this.http.get<HouseValueObject>(this.relativeURL + houseNumber + '/');
}
}
}

HouseValueObject 的值对象如下所示：

export class HouseValueObject {
   numberBathrooms: number;
   extensiveHouseData: HouseValue[];
}

我认为添加 async 和 await 会暂停执行，直到返回的 Promise 得到满足，以便 JSON 数据将被传递到 const keys = Object.keys... 代码行会起作用，但似乎并非如此。我的问题是，我怎样才能正确地暂停执行，直到返回的承诺得到满足，以确保 JSON 数据存在并且 const keys = Object.keys... 行代码像本地一样工作?

【问题讨论】：

在订阅中使用 async/await 看起来很可疑。你能发布你的getHouseData 方法吗？
@KurtHamilton 我已根据您的要求添加了 getHouseData 方法。
async/await 在订阅（已经处理异步）中使用显然是无用的并且容易出错。但是你的错误可能不是来自那里。

标签： angular typescript

【解决方案1】：

我个人会重写服务以返回一个承诺，应该更容易阅读。

HouseService:

getHouseData(houseNumber: string): Promise<HouseValueObject> {
   return this.http
      .get<HouseValueObject>(`${this.relativeURL}${houseNumber}/`)
      .toPromise<HouseValueObject>();
}

Component:

async callHouseService(): Promise<void> {
  this.houseData = await his.streetHouseService.getHouseData(this.houseNumber);
  this.extensiveHouseDataList = Object
    .keys(this.houseData.extensiveHouseData)
    .map(k => this.houseData.extensiveHouseData[k]);
}

【讨论】：