如何通過簡單的數據（json）從angular2 final（2.0.1）

Question

此代碼它的工作Angular2 2.0.0.rc.2，但現在它沒有工作 錯誤。進口FORM_DIRECTIVES，HTTP_PROVIDERS，引導

如何解決這一問題，以Angular2 V2.0.1

import { Component, OnInit } from "@angular/core"; 
import { Http, Response, URLSearchParams} from "@angular/http"; 
import { FORM_DIRECTIVES } from "@angular/common" //error 

不能在角V2.0.1

import {Observable} from 'rxjs/Observable'; 
import { IFood} from "./food"; 
import { Headers, RequestOptions } from "@angular/http"; 
import "rxjs/Rx"; 

@Component({ 

selector: "my-app", 
directives: [FORM_DIRECTIVES], //error 
templateUrl: "./app/form.html" 
}) 

export class AppComponent implements OnInit { 
public values: string[]; 
public headers: Headers; 
errorMessage: string; 
foods: IFood[]; 
foodModel = <IFood>{}; 

constructor(private http: Http) { 
    this.http = http; 
    this.headers = new Headers(); 
    this.headers.append("Content-Type", "application/json"); 
} 

ngOnInit() { 
    return this.http.get("/home/getdata") 
     .map((response: Response) => <IFood[]>response.json()) 
     .subscribe(data => this.foods = data, error => this.errorMessage = <any>error); 
} 
onSubmit(form): void { 
    let headers = new Headers({ "Content-Type": "application/json" }); 
    let options = new RequestOptions({ headers: headers }); 
    console.log(this.foodModel); 
    console.log(JSON.stringify(this.foodModel)); 

    this.http.post("/home/postform", JSON.stringify(this.foodModel), options) 
     .map((response: Response) => <IFood>response.json()) 
     .subscribe(json => { alert(this.foodModel.foodId +" "+ this.foodModel.foodName); /* handle it */ }); 
}   

和main.ts

導入FORM_DIRECTIVES

import { AppComponent } from './app.component'; 
import { bootstrap } from '@angular/platform-browser-dynamic'; 

無法導入靴帶

import {HTTP_PROVIDERS} from '@angular/http'; //error http_providers 

無法導入HTTP_PROVIDERS bootstrap（AppComponent，[HTTP_PROVIDERS]）; //錯誤引導

如何解決這一問題，以Angular2 V2.0.1

Answer 1

您需要創建NgModule小號 爲detaisl

@NgModule({ 
    imports: [BrowserModule, HttpModule, FormsModule, ReativeFormsModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule{} 

見https://angular.io/docs/ts/latest/guide/ngmodule.html並更改引導代碼

// The browser platform with a compiler 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

// The app module 
import { AppModule } from './app.module'; 

// Compile and launch the module 
platformBrowserDynamic().bootstrapModule(AppModule);