Question

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

角度：输入绑定未更新

1 个答案: