Question

我开发了使用ngrx / effects进行http调用的angular2应用程序。我使用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>

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

如您所见，store.select()的结果是可观察的。您无法直接将数据绑定到它。

你可以：

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

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

或订阅观察者。

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

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

1 个答案: