如何 return 在 Angular 7 中从 Observable 对象

Question

我在 Angular 7 和 RxJS@6.3.3 上有一个应用程序。我正在尝试从我的 Observable 对象中获取值，但我不知道为什么它没有 return.

有我的示例代码：https://stackblitz.com/edit/angular-w9ftkw

在我的示例 html 文件中，我有：

<hello name="{{ result.property1 }} {{ result.property2 }} {{ result.property3 }} {{ resultIsUndefined }}"></hello>
<p>
  {{err}}
</p>

但是我的结果的属性（{{ result.property1 }} {{ result.property2 }} {{ result.property3 }}）没有显示。

这有什么问题？

我正在尝试 return 的 res 对象仍然是 Observable 类型。我试图将它投射到 MyResponseClasss 但没有效果。

这是我真正的问题。为什么 returned 对象仍然是 Observable.

类型

关于这部分代码：

if (result) {
  result.subscribe((result: MyResponseClass) => {
    this.resultIsUndefined = false;
    res = result;
    console.log(res);
  })
  return res;
}

我想要一个数据类型为 MyResponseClass 的 res。

Answer 1

当您的数据来自 Observable 时，您应该考虑使用异步管道 {{ whatever |异步}}

更多阅读：

https://angular.io/api/common/AsyncPipe

Answer 2

您需要将 json 对象字符串化以显示在 html 中。像这样

let result = this.http.request("get", url_, options_).pipe(
map((response_: any) => this.test(response_)),
catchError((err: any, caught: Observable<any>) => {
**this.err = JSON.stringify(err);**
if (caught instanceof Response) {
try {
   return this.test(caught);
} catch (e) {
return of<MyResponseClass | null>(<any>throwError(e));
}
} else
  return of<MyResponseClass | null>(<any>throwError(caught));
})
);

Answer 3

您所要做的就是添加 json 管道。

像这样：

{{ err | json}}

或者，如果您确切地知道属性对象内部的内容，您可以使用它示例：

{{err.message}}

Answer 4

我解决了我的问题。可以通过两种方式创建 Observable 对象：

使用 Observable 异步
使用同步

我的问题是我在异步应用程序上将 Observable 对象创建为同步对象。就这些了。

Answer 5

您正在收到来自此课程的回复。

protected test(response: Response): Observable<MyResponseClass>{};

这里class需要调用http服务调用

protected test(response: Response): Observable<MyResponseClass>{
this.http.get(url,options);
};

然后你需要在你的 ts 中订阅观察者 class。

export class AppComponent  {
err: string;
resultIsUndefined: boolean;
http: HttpClient;
result: MyResponseClass;
name: string;
constructor(@Inject(HttpClient) http: HttpClient) {
this.http = http;
this.result = this.get();
}
protected test(): Observable<MyResponseClass> { 
let result = new MyResponseClass();
result.property1 = "Mr";
result.property2 = "John";
result.property3 = "Kowalsky";
return of<MyResponseClass>(result); 
}
get(): MyResponseClass {
let res = new MyResponseClass();
let url_ = '';
let options_: any = {
method: "get",
headers: new Headers({
"Content-Type": "application/json",
"Accept": "application/json"
})
};
this.test().subscribe(res =>{
this.name = res.property1 + res.property2 + res.property3;
console.log(res, this.name);
},
error=>{
this.err = JSON.stringify(error);
console.log(error);
})
this.resultIsUndefined = true;
return <MyResponseClass>null;
}
}

在app.component.html中需要这样

<hello [name]="name"></hello>
<p>
{{err}}
</p>

如何 return 在 Angular 7 中从 Observable 对象

How to return object from Observable in Angular 7

observable

angular

rxjs6

angular7