5-5.Angular 入門教學 - @Input加@Output等於雙向繫結

這次我們換個邏輯思維來處理前次的問題

@Output()
todoDataListChange = new EventEmitter<Todo[]>;

我們新增一個output，並還原本來的delete，並將在子元件修改的todoDataList給傳送出去

delete(item: Todo) {
  this.todoApiService.刪除(item).subscribe();
  this.todoDataList = this.todoDataList.filter(data => data !== item);
  this.todoDataListChange.emit(this.todoDataList);
}

隨後在父元件直接用父元件的todoDataList接收該值

<section class="main" style="display: block;">
  <app-section (todoDataListChange)="todoDataList=$event" [nowTodoList]="nowTodoList" [todoDataList]="todoDataList"
    [todoCompleted]="todoCompleted">
  </app-section>
</section>

因為本來的問題就在於改了子元件todoDataList後，但父元件todoDataList並沒有一起修改，所以畫面才無法正確顯示

那我們今天就將子元件改好的結果，傳給父元件即可修復正常

那其實這時候可以用雙向繫結的寫法精簡，將(todoDataListChange)="todoDataList=$event"和[todoDataList]="todoDataList"合併成[(todoDataList)]="todoDataList"

[(變數)]這樣的寫法就是雙向繫結，同時做了以上兩件事情

最後程式就可以精簡成這樣

<section class="main" style="display: block;">
  <app-section [(todoDataList)]="todoDataList" [nowTodoList]="nowTodoList" [todoCompleted]="todoCompleted">
  </app-section>
</section>

所以當你傳到子元件的值會在子元件中被修改，那就可以使用雙向繫結來達成更精簡直覺的寫法

參考資料： 
雙向繫結