数组拼接不会触发 ngOnChange

Question

当我向数组添加项目时，ngOnChange 被触发：

\n\n

this.entries = [{"name": "John"},{"name": "Alex"},{"name": "Joe"}]\n

\n\n

但当我删除这样的项目时不会被触发：

\n\n

this.entries.splice(this.entries.findIndex(x => x.name === "Joe"), 1);\n

\n\n

该项目确实被删除，因为数组大小发生了更改。

\n\n

Component code:\n@Component({\n  selector: \xe2\x80\x98app-component\xe2\x80\x99,\n  \xe2\x80\xa6\n})\n\nexport class InputComponent {\n  @Input() entries:any=[];\n\n  ngOnChanges() {\n    console.log(this.entries);\n  }\n}\n\nHTML:\n<app-component [entries] = "entries"></app-component>\n\nUpdate function:\nremoveEntry(key:string) {\n    this.entries.splice(this.entries.findIndex(x => x.name === key), 1);\n}\n

\n\n

我如何解决它？

\n

Answer 1

您可以使用过滤器代替拼接：

removeEntry(key:string) {
  this.entries =  this.entries.filter(x => x.name !== key);
}

为了完整起见，必须重新分配变量的原因是 filter 方法不会修改现有数组，而是返回一个包含过滤后元素的新数组。