Angular2 Http получить

Я пытаюсь получить данные из API с помощью Angular2 и привязать их к просмотру. После выполнения запроса мой компонент получает только объект массива [object Object],[object Object],[object Object]. Могу ли я получить помощь по извлечению объекта, чтобы "*ngFor" мог прочитать каждый объект. Я хочу иметь возможность привязывать данные для просмотра.

**This is my API**
[{
    _id: "578c8c670f3cd0941efb337c",
    name: "John",
    gender: "Male",
    age: "34",
    __v: 0,
},
{
    _id: "5794a90f96391dcc2436e43f",
    name: "Valur",
    gender: "Male",
    age: "22",
    __v: 0,
},
{
    _id: "5794abad70df28541eab170b",
    name: "Paul",
    gender: "Male",
    age: "43",
    __v: 0,
}]

UserService похож на:

import { Http } from 'angular2/http';
constructor(private _http: Http) { }

getuser(): Observable<any> {
     return this._http.get('http://localhost:1000/api/users')
     .map(res => res.json());
}

Это мой угловой со службой, которая обрабатывает запрос.

import { UserService } from '../services/userservice';

constructor(private userService: UserService) { }
_data: Object;

getUser():void {
    this.userService.getuser()
      .subscribe(data => this._data = data,
      error => console.log(error));

    console.log(this._data); //this part doesn't pull data at all.
}


//My view
<div *ngFor="#u of _data">
   {{u.name}} //this part gives me an error
</div>

 //But when i try to pull data from "subscribe" like this:
<div>
   {{_data | json }} //data is available
</div>

angular angular2-directives angular2-template angular2-services
person Pat    schedule 25.07.2016    source источник
comment
Как выглядит результат {{_data | json}}?   -  person Günter Zöchbauer    schedule 25.07.2016
comment
Кажется, вы используете довольно старую версию Angular2. В последних версиях Angular2 используется синтаксис <div *ngFor="let u of _data">.   -  person Günter Zöchbauer    schedule 25.07.2016

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это.

import { UserService } from '../services/userservice';

_data: any[];
constructor(private userService: UserService) { this._data = [];}

getUser():void {
  this.userService.getuser()
    .subscribe(data => {this._data = data; console.log(this._data);}
                error => console.log(error));
 }


 //My view
 <div *ngFor="#u of _data">
   {{u?.name}} //this part gives me an error
 </div>
person Yong    schedule 25.07.2016

arrow_upward
0
arrow_downward

Я согласен с Гюнтером, ошибка именно в синтаксисе *ngFor, я проверил ваш код и сделал рабочий пример:

https://github.com/TheSwash/ng2-http-service

Но быстро правильный синтаксис должен быть:

<div *ngFor="let user of users">
   {{user.name}}
</div>

Кроме того, я настоятельно рекомендую вам обновить версию angular, вы используете бета-версию. В настоящее время вы можете использовать Angular-CLI: https://cli.angular.io/

Пример выше сделан с помощью Angular-CLI.

person Iván Portilla    schedule 25.07.2016