Angular 2 * ngFor und Formular arbeiten aufgehört, wenn sie Observablen

Question

bewegt ich so eine App Initiieren natürlich Komponenten hatte:

<li *ngFor="let course of courses"> 
     <app-course [appCourse]="course" 
     (remove)="removeItem($event)" 
     ></app-course> 
</li> 

aus einem Array aus dem lokalen Speicher gezogen, die von einem Kursform bevölkert wurde, das Senden ein Objekt wie dieses:

{ 
    "_id": "587f52ad266c32fbfb10f21a", 
    "end": "31/1/2017", 
    "start": "1/1/2017", 
    "desc": "see title", 
    "name": "Intro To Express", 
    "id": 1, 
    "__v": 0, 
    "updated_at": "2017-01-18T11:34:05.416Z" 
} 

Dann habe ich ein Backend mit Observables hinzugefügt. Jetzt sendet das Formular ein Objekt, ich kann sehen, ob ich es logge, dass es in der richtigen Form ist.

Dann geht es an einen Vermittler-Service, der es in den Dienst schiebt, die das Backend verwaltet:

addItem(course) { 
    this.storage.post(course).subscribe((data: any) => 
    {console.log(JSON.stringify(data)); return (data); }, error => 
    {console.log(error)});; } 

ich immer noch das Objekt sehen kann, wie ich es in den Dienst von meiner Hauptkomponente bin drängen mit console.log():

{"name":"test","id":"1234","desc":"test","start":"2017-01-30‌​","end":"2017-02-03"‌​} 

Aber wenn es um die Datenbank tatsächlich bekommt, keines der Felder aus der Form vorhanden ist:

{ 
    "_id": "588f251bff96fa0004e0c2cd", 
    "__v": 0, 
    "updated_at": "2017-01-30T11:35:55.567Z" 
}" 

Auch das Array kommt immer noch zurück - ich kann es mit console.log() sehen, aber meine ngFor initiiert nicht mehr Komponenten.

Es gibt keine Fehler.

Was sollte ich überprüfen?

Answer 1

Verstanden!

Das erste Problem war das Observable ordnungsgemäß abonnieren.

ngOnInit() { 
    this.appListService.getAppList() 
    .subscribe(res => this.courses = res); 
} 

der App-Liste Service ist nur als Manager in diesem Fall handeln, so dass er zurückkehrt nur eine beobachtbare:

constructor(private storage:CoursesService) { } 
getAppList() { 
    return this.storage.get(); 
} 

Die Kurse Service macht die GET-Anforderung an das Backend:

get(): Observable<Course[]> { 
    return this.http.get(this.BaseUrl) 
        .map((res:Response) => res.json()) 
        .catch(this.handleError); 
        } 

Wenn das resultierende Observable an die Hauptkomponente übergeben wird, funktioniert die ngFor gut.

Jetzt für den POST. Zunächst einmal musste ich JSON.stringify() den Körper, wie folgt aus:

post(course: Course): Observable<Course[]> { 
    let courseString = JSON.stringify(course); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post(this.BaseUrl, courseString, options) 
       .map((res:Response) => res.json()) 
       .catch(this.handleError); 
    } 

Dann habe ich auf der Rückseite Ende ging und die POST eingestellt, so dass stattdessen mit einer Erfolgsmeldung zu antworten, es antwortete mit die Ergebnisse einer allgemeinen GET-Anfrage.

Jetzt funktioniert alles einwandfrei (außer für all die Arbeit, die natürlich zu tun bleibt.)