首页 文章

Angular2 Http得到

提问于
浏览 次
0

我试图使用Angular2从API中提取数据，并将其绑定到视图 . 请求完成后，我的组件只获取数组对象 [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-template angular2-directives angular2-services

2 回答

  • 1

    试试这个 .

    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>
    回复于
  • 0

    我同意Günter，错误完全在* ngFor的语法中，我已经测试了你的代码，我做了一个工作的例子：

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

    但很快正确的语法应该是：

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

    此外，我强烈建议您更新角度版本，您正在使用测试版 . 目前您可以使用Angular-CLI：https://cli.angular.io/

    上面的示例是使用Angular-CLI完成的 .

    回复于

相关问题