javascript - 在数组中使用切片不会影响模板

Question

我有一个数组 availableBoats，我使用以下代码片段渲染其元素:

<app-boat *ngFor="let b of availableBoats" [size]="b.size" [(available)]="b.available" [type]="b.type" ></app-boat>

我期望当我使用 .slice() 函数从数组中删除一艘船时，它不会再出现在模板中。我是否做错了什么或者这不是 Angular 中的预期行为？

在某个时刻，会调用以下代码。我测试了它，在那里设置了一个断点，我可以看到船被移除了:

for (let i = 0; i < this.availableBoats.length; i++) {
  const b = this.availableBoats[i];
  if (b.type === this.selectedBoatType) {   
    this.availableBoats.slice(i, 1);
    return;
  }
}

Answer 1

I was expecting that when I remove one boat from the array using the .slice() function, it won't appear anymore in the template.

您的假设不正确，因为 slice

(...) returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

为了改变数组，您需要使用 splice其中

(...) changes the contents of an array by removing existing elements and/or adding new elements

因此 this.availableBoats.slice(i, 1); 不会从 this.availableBoats 中删除任何元素。

为此，请使用 this.availableBoats.splice(i, 1);