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

我使用ngrx/effects开发了angular2应用程序，用于进行http调用。我已将其用作参考应用程序。一旦响应来自http，我就无法在屏幕上显示它。它显示[对象]。这是我的密码

链接到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>

{{jsons}}

组件技术

        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);
      }
    }

导出类实验细节组件实现OnInit{
jsons：可观察的；
孤岛负载：可观察；
建造师(
私人商店
) {
this.isLoading=store.select（fromStore.getIsLoading）；
this.jsons=store.select（fromStore.getJson）；
log（this.jsons）
}
恩戈尼尼特（）{
this.store.dispatch（新的jsonAction.GetJson（））；
//this.jsons=this.store.select（fromStore.getJson）；
}
}

特效

        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>
      ) {}
    }

导出类GetJsonEffects{
@Effect（）json$=this.actions$of type（Act.GET\u json）
.map（toPayload）
.withLatestFrom（此.store$）
.mergeMap（[有效负载，存储]）=>{
返回此文件。http$
.得到(`http://localhost:4000/data/`)
.map（数据=>{
返回新的Act.GetJsonSuccess（{data:data}）
})
.catch（（错误）=>{
可观测收益(
new Act.getjson失败（{error:error}）
);
})
});
建造师(
私有操作$：操作，
私有http$：HttpClient，
私人商店$：商店
) {}
}

如您所见，

store.select（）的结果是可观察的。您不能直接将数据绑定到它

您可以：

使用
async
管道使UI为您订阅可观察的并提取数据，如：

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

这是一件事：

如果您使用的是
Http
服务（来自
@angular/Http
模块）：

另一件事是返回的是响应对象，而不是从中提取的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() })
        })

返回this.http$
.得到(`http://localhost:4000/data/`)
.map（数据=>{
返回新的Act.GetJsonSuccess（{data:data.json（）}）
})

get（）
位将告诉TypeScript JSON对象与
MyInterfaceName
匹配，因此您将基于此进行intellisense和错误检查（仅在编译时，这些都不会影响运行时）

您的代码的哪一部分与
[对象]
相关。它显示在哪里？预期的行为是什么？如果您想显示json对象，可以使用
json
管道：
{{jsons | json}}
谢谢您的回复。如果我使用{jsons | json}，我会得到错误-error TypeError：将循环结构转换为JSONHi Meligy，感谢您的回复。我尝试了你提到的改变。我在Effects.ts属性“json”中遇到一些错误。类型“Object”上不存在此.http$.get（

）

应返回

可观察的

，因此

.map（response=>…）

应将

响应

作为

响应

而非

对象

。当你在上面盘旋时，你看到的就是这个吗？您的真实代码是否与此处发布的代码不同？也可能您的

mergeMap（）

中包含所有这些代码的括号太多或某些内容被关闭，并且

map（）

在此之后运行。确保直接在

.get（

）

之后调用，并且

get（）

调用只有一个结束括号。Meligy，发布的代码和我正在使用的代码都是相同的。是的，http.get（）返回一个对象。在该对象中，不存在json（）方法。使用Redux Devtool，我检查了stateJson成功，我能够看到json数据。我也检查了括号。我在显示存储区中的数据时遇到问题。似乎您使用的是

HttpClient

而不是

Http

（在Angular 4.3+中，从

@Angular/common/Http

导入），它为您执行

.json（）

。在这种情况下，你不需要它。只需要

async

管道。顺便说一句，在

HttpClient

中，您可以像这样调用

get（）

。get（

）

所以TypeScript使用此类型而不是对象。这在运行时不起任何作用，只告诉TypeScript使用

MyInterfaceName

进行智能感知/错误检查等。

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