POSTリクエストからの応答後にコレクション内のクライアント作成オブジェクトのIDを設定する方法

Question

比較的単純なタスクアプリケーションで作業していますが、IDを設定する最良の方法POST要求からの応答が返されるとTaskオブジェクト内の他の潜在的なサーバー作成コンテンツ）を返します。例えば;

// POST Data 
{ 
    title: 'The title for the task', 
    due: '2016-01-01' 
} 

// Response 
{ 
    id: 123, 
    title: 'The title for the task', 
    due: '2016-01-01' 
} 

は現在、私はsubscribe機能で発生したコレクションに新しいタスクをプッシュしていたが、それはタスクが瞬時にリスト（したがってページ）に追加されていないことを意味します。タスクオブジェクトがコレクションに即座にプッシュされ、API更新からの応答またはそのオブジェクトを置き換えるための最良の方法は何ですか？

私はコレクションの最後のタスクの編集を検討しましたが、明らかに、最初のタスクからの応答が返される前に2番目のタスクを追加できます。

次のコードは、レスポンス時にイベントで発生するリストコンポーネントと子フォームコンポーネントで、現在の実装を示しています。

// task-form.component.ts 
addTask(task) { 
    this.taskService.create(task) 
    .subscribe(savedTask => { 
     this.taskAdd.emit(savedTask); 
     this.task.title = null; 
    }); 
} 

// task-list.component.ts (listening to the taskAdd event) 
addTaskToPeriod(task: Task) { 
    this.tasks.push(task); 
} 

ありがとうございます！

Answer 1

これを行う最良の方法ではないのは分かりませんが、タスクオブジェクトはaddTaskメソッドに参照渡しされているので、すぐにイベントを発行してUIにタスクが表示されたらIDを設定しますAPIからの応答でタスクオブジェクトにあなたはまた、クライアント考えることができ

addTask(task) { 
    // Emit immediately 
    this.taskAdd.emit(task); 

    this.taskService.create(task) 
     .subscribe(savedTask => { 
     // Update the task that is now visible in the UI by reference 
     task.id = savedTask.id; 
     }); 

    // Full reassignment to prevent further by-reference side effects 
    this.task = {}; 
    }