Wie man einen Ajax-Anruf mit angular2/http

mache Ich verwende Angular 2.0.0-Beta.0 mit Typoskript. Ich war in der Lage, einen Ajax-Aufruf mit window ['fetch'] aus der Box ohne Probleme (und ich brauchte keine der in früheren Versionen erforderlichen Workarounds).Wie man einen Ajax-Anruf mit angular2/http

Aber ich konnte nicht das gleiche machen Ajax Call arbeitet mit angular2's http.

Hier ist der Code, um das Problem zu demonstrieren. Es gibt drei Dateien, index.html im Projektordner und boot.ts und app.component.ts in einem Unterordner namens app.

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>

Quelle

2015-12-26 Peter Pei Guo

Was wäre das Problem/Fehler? –

Haben Sie 'HTTP_PROVIDERS' in Ihrem Bootstrap hinzugefügt? –

Die Art, wie Sie es versucht haben, ist korrekt. Ich habe gerade bemerkt, dass Sie in System.import bootstrappen. Ich habe es noch nie so gesehen, funktioniert das für dich? Können Sie versuchen, in der gleichen 'SomeComponent' Datei zu booten? Denken Sie daran, 'HTTP_PROVIDERS' aus' angular2/http' zu importieren. –

Sie sollten einen Http-Anbieter hinzufügen. Sie haben zwei Möglichkeiten:

Auf Bootstrap:

import {HTTP_PROVIDERS} from 'angular2/http';

und:

ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);

Auf der Komponente mit dem Service :

i mport {HTTP_PROVIDERS} aus 'angular2/http';

@Component ({

...

Anbieter: [HTTP_PROVIDERS]

...
})

Quelle

2015-12-26 21:17:21

Ich hatte ein ähnliches Problem, wenn ich gebraucht eine alte Version des TypeScript-Compilers. Ich reparierte es, indem ich das Konstruktorargument von http: Http zu @Inject(Http) http: Http änderte. Natürlich müssen Sie Inject importieren, um es zu verwenden.

Ich würde versuchen, das SystemJS Release bei https://code.angularjs.org/tools/system.js anstelle der Veröffentlichung bei rawgithub.com zu verwenden.

Quelle

2015-12-27 03:04:19 user934904

Wie man einen Ajax-Anruf mit angular2/http

Antwort

Verwandte Themen