angle2のアプリケーションで[オブジェクトオブジェクト]を取得する

Question

httpコールを行うためにngrx/effectsを使用してangular2アプリケーションを開発しました。私は参考アプリケーションとしてGITを使用しました。応答がhttpから来たら、私はそれを画面に表示することができません。その[オブジェクトオブジェクト]を表示します。ここに私のコードです。ご覧のとおり

<div class="container"> 
<div class="left-container cf"> 
<mat-tab-group> 
    <mat-tab label="Configuration">{{jsons}}</mat-tab> 
    <mat-tab label="Captured Output"> 
    </mat-tab> 
</mat-tab-group> 
</div> 
</div> 

Component.ts

 export class ExperimentDetailsComponent implements OnInit { 

     jsons: Observable<any>; 
     isLoading: Observable<any>; 

     constructor(
     private store: Store<fromStore.State> 
    ) { 
     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<fromStore.State> 
    ) {} 
    } 

Answer 1

をcomponent.htmlにリンク

HTMLページは、store.select()の結果が観察されます。データを直接バインドすることはできません。

あなたいずれかを実行できます。

<mat-tab label="Configuration">{{jsons | async}}</mat-tab> 

それとも、観察に自分自身を購読：

は次のように、UIがあなたのために観測可能に加入し、データを抽出するためにasyncパイプを使用してください。

あなたがHttpサービスを使用している場合（モジュール@angular/httpから）：一つのことだ

export class ExperimentDetailsComponent implements OnInit { 

    jsonSubscription = store.select(fromStore.getJson) 
      .subscribe(jsons => this.jsons = jsons); 

    ngOnDestroy() { 
     this.jsonSubscription.unsubscribe(); 
    } 
     jsons: any; 

    // ... 
} 

他の事はあなたがいないJSONはそれから抽出されたResponseオブジェクトを返していることです。効果のある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モジュールから）：角度で
（利用可能にv4.3 +）

この場合、.json()に電話する必要はありません最初に.map()を提案しました。また、あなたはJSONは、このようなget()を呼び出すことで一致することを期待タイプについての活字体を伝えることができ

：

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

get<MyInterfaceName>()ビットは角度がJSONオブジェクトを使用して、MyInterfaceNameと一致していることを活字体に伝えるようになりますこれに基づいてインテリセンスとエラーチェックを行います（コンパイル時にのみ、実行時には影響しません）。

HttpClient Documentation