Angular：輸入綁定未更新

Question

我目前在嘗試將列表綁定到 Angular 中的輸入 object 時遇到問題。 我希望每次添加到列表時子項中的插值都會更新，但是原始加載的值在視圖中保持不變。 即使 OnChange 沒有觸發，我已經為此苦苦掙扎了好幾個小時，任何幫助都將不勝感激。

家長

<main-task-list [in-list]='list_values'></main-task-list>

@Component({
   selector: 'main-app',
   templateUrl: './main-app.component.html',
   styleUrls: ['./main-app.component.sass']
})
export class MainAppComponent implements OnInit {
  list_values = [ 10, 20, 30 ]

   add_to_list(){
      this.list_values.push(12)
      console.log( this.list_values )
   }
}

孩子

<div>{{in_list}}</div>

@Component({
  selector: 'main-task-list',
  templateUrl: './main-task-list.component.html',
  styleUrls: ['./main-task-list.component.sass']
})
export class MainTaskListComponent implements OnInit {
  @Input( 'in-list') in_list: number[] | null = null

  ngOnChanges( changes: SimpleChanges ){
     console.log('re render')
  }
}

Answer 1

當您向其中推送值時，您的項目的引用不會改變。 它需要改變。 嘗試創建一個新項目， ngOnChange將再次觸發：

this.list_values = [...this.list_values,12]

代替

this.list_values.push(12)