我是Angular2和Typescript的新手。我现在正在学习。我尝试从REST服务获取数据,然后要列出并插入来自该服务的数据。所以我的API链接是http://jsonplaceholder.typicode.com/users/1
这是我的HttpTestService.ts代码;
import {Component} from '@angular/core';
import {Http} from '@angular/http';
import {Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class HTTPTestService{
constructor(private _http:Http){}
getUser(){
return this._http.get("http://jsonplaceholder.typicode.com/users/1")
.map(res=>res.json());
};
}}
这是我的HttpTestComponent.ts;
import { Component } from '@angular/core';
import {HTTPTestService} from './http-test.service';
import { User } from './user';
@Component({
selector:'http-test',
template:`
<button (click)="onGet()">Get Data</button><br/>
<div>Output:{{getData}}</div><br/>
<button (click) = "onPost()">Post Data</button><br/>
<div>Output:{{postData}}</div><br/>
<button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/>
<div>Output:{{getPromiseData}}</div><br/>
`,
providers:[HTTPTestService]
})
export class HTTPTestComponent{
getData:string;
getPromiseData:string;
postData:string;
constructor(private _httpService:HTTPTestService){}
onGet(){
console.log('Getting user now.');
this._httpService.getUser().subscribe(
data =>this.getData = JSON.stringify(data),
error=>alert(error),
()=>console.log('Finished Get')
);
}}
这是我的User.ts
export class User{
constructor(public id: number,public name:string) { }
}
如何填写User
课程,然后如何向User
课程中添加通用列表。
最好的祝福
据我了解您的问题,只需创建一个新Object
的User
type并传递所需的数据(在您的情况下为)即可id and name
。
private userList: Array<User> = new Array<User>();
onGet(){
console.log('Getting user now.');
this._httpService.getUser().subscribe(
data => this.parseUser(data),
error=>alert(error),
()=>console.log('Finished Get')
);
}
parseUser(data) {
let user = new User(data.id, data.name);
this.userList.push(user);
}
创建用户的列表只是做数组User
一样,private Users: Array<User> = new Array<User>();
记得要进口User
。
编辑。为了测试目的,请更改此
@Component({
selector:'http-test',
template:`
<button (click)="onGet()">Get Data</button><br/>
<div>Output:{{getData}}</div><br/>
<button (click) = "onPost()">Post Data</button><br/>
<div>Output:{{postData}}</div><br/>
<button (click) = "onPromiseGet()">Get Data(w Promise)</button><br/>
<div>Output:{{getPromiseData}}</div><br/>
<div *ngFor="let user of userList">
<p>Id: {{user.id}}</p>
<p>Name: {{user.name}}>/p>
<br />
</div>
`,
providers:[HTTPTestService]
})
当响应来时angular
将打印数据:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句