javascript - Angular:输入绑定(bind)不更新

Question

我目前在尝试将列表绑定(bind)到 Angular 中的输入对象时遇到问题。我希望每次添加到列表时子项中的插值都会更新，但原始加载值在 View 中保持不变。即使 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 )
   }
}

child

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