Angular 2 Service返回對象對象

預先感謝您的時間，我試圖展示從本地mongodb集合中提取的集合。 http://localhost:8080/player/all是當我用postmaster測試時返回正確數據的API端點。這是一組對象。的HTML僅顯示[對象的對象]對於像每個對象：Angular 2 Service返回對象對象

[對象的對象]，[對象的對象]，[對象的對象]，[對象的對象]，[對象的對象]，[對象的對象]，[對象的對象]，[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()); 
    } 
}

來源

2017-03-28 MFKGER

該變量保存對象列表。你正在綁定UI中的對象/數組，因此它會說[Object Object]作爲其字符串表示形式

要獲取所有值，可以使用* ngFor並獲取單個值並顯示。

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

正如可以看到

或者正如@saneetharan建議可以綁定通過那裏索引在側陣列的對象的屬性individule值

來源

2017-03-28 20:09:58

你需要使用dot操作，當你在模板中顯示訪問屬性，或者使用ngFor如果數組。

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

來源

2017-03-28 19:53:38 Sajeetharan

謝謝。 ngFor也返回[object Object]。我想要像API一樣返回對象來顯示數組。 – MFKGER

你可以發佈什麼是你在 – Sajeetharan

'[{「_id」：「58d309f396c356946e700044」，「firstName」：「勒布朗」，「lastName」：「詹姆斯」，「總體」：96，「職位」：「SF」，「工資」：25 「時間」：1，「註釋」：「Birdrechte」，「yearsInTeam」：10，「團隊」：「TOR」，「lastTeam」：「」，「birthYear」：1984 ，「年齡」：32}]' 這將是第一個對象。有超過500. – MFKGER

Angular 2 Service返回對象對象

回答

相關問題