Angular 2 Service返回对象对象

提前感谢您的时间，我试图展示我从当地的mongodbcollections中收集的一个集合。 http：// localhost：8080 / player / all是我用postmastertesting时返回正确数据的API端点。 这是一个对象数组。 HTML只显示每个对象的[object Object]：

[object object]，[object object]，[object object]，[object object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object] [对象对象]，[对象对象]，[对象对象]，[对象对象]

服务或组件是否有问题？

后端是一个快递/节点的应用程序

player.component.html

<div> {{allPlayers}} </div> 

player.component.ts

 import { Component, OnInit } from '@angular/core'; import {AuthService} from '../../services/auth.service'; import {PlayerService} from '../../services/player.service'; import {Router} from '@angular/router'; @Component({ selector: 'app-player', templateUrl: './player.component.html', styleUrls: ['./player.component.css'] }) export class PlayerComponent implements OnInit { allPlayers: Array<Object>; constructor(private authService:AuthService, private router:Router, private playerService: PlayerService) { } ngOnInit() { this.playerService.getAllPlayers().subscribe(allPlayers => { this.allPlayers = allPlayers; }, err => { console.log(err); return false; }); } } 

player.service.ts

 import { Injectable } from '@angular/core'; import {Http, Headers} from '@angular/http'; @Injectable() export class PlayerService { constructor(private http:Http) { } getAllPlayers(){ return this.http.get("http://localhost:8080/player/all") .map(res => res.json()); } } 

Answer 1

该variables保存对象的列表。 你绑定了UI中的对象/数组，所以它把[Object Object]当成它的string表示

要获得所有的值你可以使用* ngFor并获得个人价值和显示。

 <ul> <li *ngFor="#player of allPlayers"> {{ player.name }} is {{ player.age }}. </li> <ul> 

正如你所看到的

或者@saneetharanbuild议你可以通过索引值绑定边数组中的对象的个体属性

Answer 2

在模板内部显示时，需要使用dot运算符来访问属性，如果是数组，则使用ngFor。

  <div *ngFor="let player of allPlayers"> {{player.firstName}} </div>