时间戳

首页 > 解决方案 > 如何从 Angular 中的 Promise 对象类型中获取价值？

angular - 如何从 Angular 中的 Promise 对象类型中获取价值？

问题描述

我在 Angular Service 中定义了一个函数调用：

getNewJoinerInfo(staffID: String) {
    return this.httpClient.get(this.ldapEndPoint + staffID, this.httpOptions).toPromise()
               .then(res => of(JSON.parse(JSON.stringify(res)).result[0] as NewJoinerObj))
}

当我在组件中调用此函数时，如何从Promise<NewJoinerObj>类型中获取这些值？当我尝试将 return 分配给NewJoinerObjtype 时，它​​是错误的，因为Promise<NewJoinerObj>is not NewJoinerObj。

var response = <NewJoinerObj> this.newJoinerService.getNewJoinerInfo(this.newJoiner.staffId);

我该怎么办？

标签： angularpromise

解决方案

您正在使用角度。

不建议在 Angular 中使用 Promises

让我们考虑下面的代码

getNewJoinerInfo = (staffID: String) => 
  this.httpClient.get(this.ldapEndPoint + staffID, this.httpOptions)

我只是返回响应。这将返回一个Observable<Object>. 让我们考虑您的代码，

你调用.toPromise()- 这转换为Promise
你调用.then()并返回of()它转换回Observable

您可以通过简单地管道Observable流来实现这一点

import { map } from 'rxjs/operators';

getNewJoinerInfo = (staffID: String) => 
  this.httpClient.get(this.ldapEndPoint + staffID, this.httpOptions).pipe(
    map(([result]) => result as NewJoinerObj )
  )

我使用解构来提取第一项，而不是map((result) => result[0] )我有map(([result]) => result )

接下来要注意的是，您需要订阅Observable. 看它像.then()。Observables

在您的组件中，您可以拥有

newjoiner: NewJoinerObj;

ngOnInit () {
this.myService.getNewJoinerInfo().subscribe(
    res => this.newjoiner = res
  )
}

在你的 html 中简单地绑定

<span>{{ newjoiner | json }}</span>

json 管道只是启用 JSON 对象的显示

推荐阅读