在angular2应用程序中获取[Object Object]
Getting [Object Object] in angular2 application
I have developed angular2 application using ngrx/effects for making http calls. I have used GIT 作为参考应用。一旦响应来自 http,我就无法在屏幕上显示它。它显示[object Object]。这是我的代码。
HTML 页面链接到 component.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>
) {}
}
如您所见,store.select()
的结果是可观察的。您不能直接将数据绑定到它。
您可以:
使用 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
匹配,因此您将获得基于此的智能感知和错误检查(仅在编译时,none 无论如何都会影响运行时)。
HTML 页面链接到 component.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>
) {}
}
如您所见,store.select()
的结果是可观察的。您不能直接将数据绑定到它。
您可以:
使用 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
匹配,因此您将获得基于此的智能感知和错误检查(仅在编译时,none 无论如何都会影响运行时)。