角度2 * ngForとフォーム提出しなくなった観測

Question

に移動したときに私はこのようなコースのコンポーネントを開始アプリ持っていた作業：配列はもちろんのフォームから移入されたローカルストレージから引き出さから送信し、

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

を

{ 
    "_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" 
} 

次に、私は観測可能なものをバックエンドに追加しました。今、フォームはオブジェクトを送信します、私はそれが正しい形であることをログに記録するかどうかを見ることができます。

そして、それは、バックエンドを管理するサービスにプッシュ仲介サービス、に行く：

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

私は私のメインコンポーネントからサービスへのそれを押してると、私はまだオブジェクトを見ることができます（）にconsole.logを持つ：

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

しかし、それは実際にデータベースになったときに、フォームのフィールドのいずれもが存在しない：

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

また、配列はまだ戻ってきます。console.log（）で見ることができますが、ngForはコンポーネントを起動しなくなりました。

エラーはありません。

どうすればよいですか？

Answer 1

ありがとうございました！

最初の問題は、観測対象を正しく購読していました。

アプリのリストサービスは、ちょうどこの場合のマネージャーとして機能しているので、それだけで、観察を返して

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

：

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

コース・サービスはバックエンドにGETリクエストを行います

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

結果の観測値がメインコンポーネントに渡されると、ngForは正常に動作します。

今、POSTのため。まず第一に、私はこのように、JSON.stringify（）身体に持っていた。そして、

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); 
    } 

が、私はバックエンドに行き、代わりに成功メッセージで応答で、それがで答えたように、POSTを調整します一般的なGETリクエストの結果

今のところ、すべての作業はうまくいきます（残っているすべての作業を除く）。