在angular2应用程序中获取[Object Object]

Question

我已经使用ngrx/effects 开发了angular2 应用程序来进行http 调用。我使用GIT 作为参考应用程序。一旦响应来自 http，我就无法在屏幕上显示它。它显示[object Object]。这是我的代码。

链接到component.html的HTML页面

<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>

组件.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

如您所见，store.select() 的结果是一个 observable。您不能直接将数据绑定到它。

您可以：

使用 async 管道让 UI 为您订阅 observable 并提取数据，例如：

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

或者自己订阅 observable。

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 模块）：
（在 Angular v4.3+ 中可用）

在这种情况下，您不需要自己致电 .json()，它会为您完成，所以您不需要先拨打 .map() 我建议。

您还可以通过调用get() 来告诉 TypeScript 您希望 JSON 匹配的类型，如下所示：

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

get<MyInterfaceName>() 位将使 Angular 告诉 TypeScript JSON 对象与 MyInterfaceName 匹配，因此您将获得基于此的智能感知和错误检查（仅在编译时，无论如何这些都不会影响运行时）。

HttpClient Documentation