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

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

Answer 2

我也不是角色专家，我正在学习。我所理解的是，当你删除数组中的某个项目时，你需要创建新变量来删除项目，然后重新设置，所以它调用事件来刷新，我认为这就是它。这是一个例子：

let newPhotos = this.photos.slice(0);
let index = newPhotos.indexOf(photo);
newPhotos.splice(index, 1);
this.photos = newPhotos;

你可以试着告诉我它是否有效吗？你可以尝试使用FILTER！谢谢，对不起我的知识和英语！

array splice不会触发ngOnChange

2 个答案: