7
Tôi đang sử dụng Angular 2.0.0-beta.0 với bản ghi. Tôi đã có thể thực hiện cuộc gọi ajax với cửa sổ ['fetch'] ra khỏi hộp mà không có bất kỳ vấn đề nào (và tôi không cần phải sử dụng bất kỳ giải pháp nào được yêu cầu trong các phiên bản trước đó.)Cách thực hiện cuộc gọi ajax với angular2/http
Nhưng tôi không thể thực hiện tương tự cuộc gọi ajax hoạt động với http của angular2.
Đây là mã để giới thiệu sự cố. Có ba tệp, index.html trong thư mục dự án và boot.ts và app.component.ts trong thư mục con được gọi là ứng dụng.
app.component.ts:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
providers: [HTTP_PROVIDERS],
template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}'
})
export class AppComponent {
http: Http;
tasks = [];
constructor(http: Http) {
alert(http == null);
this.http = http;
}
getTasks(): void {
this.http.get('http://localhost:3000/tasks/norender');
//.map((res: Response) => res.json())
//it is important to have this subscribe call, since the
//request is only made if there is a subscriber
.subscribe(res => this.tasks = res);
}
}
boot.ts:
import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [HTTP_PROVIDERS]);
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Điều gì sẽ là vấn đề/lỗi? –
Bạn đã thêm 'HTTP_PROVIDERS' vào bootstrap chưa? –
Cách bạn đã thử là chính xác. Tôi cũng nhận thấy rằng bạn đang bootstraping trong System.import. Tôi đã không nhìn thấy cách đó để làm điều đó trước đây, đó là làm việc cho bạn? Bạn có thể thử bootstraping trong cùng một tập tin 'SomeComponent'? Hãy nhớ nhập 'HTTP_PROVIDERS' từ' angular2/http'. –