javascript - 数组拼接不会触发 ngOnChange

Question

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

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

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

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

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

Component code:
@Component({
  selector: ‘app-component’,
  …
})

export class InputComponent {
  @Input() entries:any=[];

  ngOnChanges() {
    console.log(this.entries);
  }
}

HTML:
<app-component [entries] = "entries"></app-component>

Update function:
removeEntry(key:string) {
    this.entries.splice(this.entries.findIndex(x => x.name === key), 1);
}

我该如何解决？

Answer 1

您可以使用过滤器而不是拼接:

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

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