Получение в приложении angular2

введите описание изображения здесь Я разработал приложение angular2, используя ngrx / effects для создания http-звонков. Я использовал GIT в качестве справочного приложения. Как только ответ приходит от http, я не могу отображать его на экране. Его отображение [object Object]. Вот мой код.

HTML-страница, связанная с компонентом.html

{{jsons}}

Component.ts

  export class ExperimentDetailsComponent implements OnInit { jsons: Observable; isLoading: Observable; constructor( private store: Store ) { this.isLoading = store.select(fromStore.getIsLoading); this.jsons = store.select(fromStore.getJson); console.log(this.jsons) } ngOnInit() { this.store.dispatch(new jsonAction.GetJson()); // this.jsons = this.store.select(fromStore.getJson); } } 

Effects.ts

  export class GetJsonEffects { @Effect() json$ = this.actions$.ofType(Act.GET_JSON) .map(toPayload) .withLatestFrom(this.store$) .mergeMap(([ payload, store ]) => { return this.http$ .get(`http://localhost:4000/data/`) .map(data => { return new Act.GetJsonSuccess({ data: data }) }) .catch((error) => { return Observable.of( new Act.GetJsonFailed({ error: error }) ); }) }); constructor( private actions$: Actions, private http$: HttpClient, private store$: Store ) {} } 

Как вы видите, результат store.select() является наблюдаемым. Вы не можете напрямую привязать данные к нему.

Вы также можете:

Используйте async канал, чтобы пользовательский интерфейс подписался на наблюдаемый для вас и извлек данные, например:

 {{jsons | async}} 

Или подпишитесь на наблюдаемые.

 export class ExperimentDetailsComponent implements OnInit { jsonSubscription = store.select(fromStore.getJson) .subscribe(jsons => this.jsons = jsons); ngOnDestroy() { this.jsonSubscription.unsubscribe(); } jsons: any; // ... } 

Это одно:

Если вы используете службу Http (из модуля @angular/http ):

Другое дело, что вы возвращаете объект Response, а не JSON, извлеченный из него. map() в вашем эффекте должна вызвать data.json() . Подобно:

  return this.http$ .get(`http://localhost:4000/data/`) .map(data => { return new Act.GetJsonSuccess({ data: data.json() }) }) 

Или, как мне нравится, добавьте еще одну map() чтобы все было ясно:

  return this.http$ .get(`http://localhost:4000/data/`) // You could also create an interface and do: // `response.json() as MyInterfaceName` // to get intellisense, error checking, etc .map(response => response.json()) .map(data => { return new Act.GetJsonSuccess({ data: data }) }) 

Если вы используете сервис HttpClient (из модуля @angular/common/http HttpClient @angular/common/http ):
(Доступно в Angular v4.3 +)

В этом случае вам не нужно вызывать .json() самостоятельно, он делает это за вас, поэтому вам не нужен этот первый .map() я предложил.

Вы также можете указать TypeScript о типе, который вы ожидаете от JSON, путем вызова метода get() следующим образом:

  return this.http$ .get(`http://localhost:4000/data/`) .map(data => { return new Act.GetJsonSuccess({ data: data.json() }) }) 

get() заставит Angular сказать TypeScript, что объект JSON соответствует MyInterfaceName , поэтому вы получите intellisense и проверку ошибок на основе этого (во время компиляции, ни в коем случае это не влияет на время выполнения).

Документация HttpClient