[英]Angular2 http.get code not working
我正在Angular2 beta 15中试用此代码。
import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
@Component({
selector: 'my-app',
template: `
<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>{{data.title}}</pre>
`
})
export class AppComponent {
data: any;
loading: boolean;
constructor(public http: Http) {
}
makeRequest(): void {
this.loading = true;
this.http.get('http://jsonplaceholder.typicode.com/photos/1')
.map((res: Response) => res.json())
.subscribe(res => {
this.data = res;
this.loading = false;
});
}
}
由于某种原因,它正在获取数据但未显示。
我在这里想念什么?
我的代码可以在"angular2": "2.0.0-beta.15"
上正常工作"angular2": "2.0.0-beta.15"
:
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS,Http,Response} from 'angular2/http';
// see issue more detail here : https://github.com/angular/angular/issues/5632#issuecomment-167026172
import 'rxjs/Rx';
@Component({
selector: 'my-app',
template: `
<h2>Basic Requests</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading......</div>
<pre>title : {{array.title}}</pre>
`,
providers: [HTTP_PROVIDERS]
}
export class AppComponent {
array = Array<any>;
loading: boolean;
constructor(
public http:Http
){
}
makeRequest(): void {
this.loading = true;
this.http.get('http://jsonplaceholder.typicode.com/photos/1')
.map((res: Response) => res.json())
.subscribe(res => {
this.array = res;
this.loading = false;
});
}
}
import 'rxjs/Rx'
在此处查看问题的更多详细信息: https : //github.com/angular/angular/issues/5632#issuecomment-167026172 import 'HTTP_PROVIDERS'
[HTTP_PROVIDERS]
一切看起来不错,只需更改为:
{{data?.title}}
在您的请求完成之前, data
是不确定的。 猫王运算符有助于避免空指针。
还添加缺少的导入:
import 'rxjs/Rx';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.