Как вернуть объект из Observable в Angular 7 - PullRequest
Новая
       37

Как вернуть объект из Observable в Angular 7

0 голосов
/ 01 февраля 2019

У меня есть приложение на Angular 7 и RxJS@6.3.3.Я пытаюсь получить значение из моего объекта Observable, и я не знаю, почему он не возвращается.

Вот мой пример кода: 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 }}) моего результата не отображаются.

Что с этим не так?

res объект, который я пытаюсь вернуть, все еще имеет тип Observable.Я пытался наложить его на MyResponseClasss, но безрезультатно.

И это моя настоящая проблема.Почему возвращаемый объект по-прежнему имеет тип Observable.

В этой части кода: 

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

Я хочу иметь res с типом данных MyResponseClass.

Ответы [ 5 ]

0 голосов
/ 04 февраля 2019

вы получаете ответ от этого запроса.

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

Здесь, в этом классе, вам нужно вызвать сервисный вызов http. 

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

Затем, после того, как вам нужно подписаться на наблюдателя в вашем классе ts. 

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>
0 голосов
/ 01 февраля 2019

Я решил свою проблему.Наблюдаемый объект может быть создан обоими способами:

  • как асинхронный с использованием Observable
  • в качестве синхронизации с использованием

Myпроблема заключалась в том, что я создал объекты Observable как синхронизацию в асинхронном приложении.Вот и все.

0 голосов
/ 01 февраля 2019

вам нужно преобразовать объект 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));
})
);
0 голосов
/ 01 февраля 2019

Все, что вам нужно сделать, это добавить канал json.

следующим образом: 

{{ err | json}}

или, если вы точно знаете, какое свойство внутри объекта вы хотите использовать, пример: 

{{err.message}}
0 голосов
/ 01 февраля 2019

Когда ваши данные поступают из Observable, вы должны рассмотреть возможность использования асинхронного канала {{любой |async}}

Подробнее:

...