在数组中使用slice不会影响模板

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

  

我期望当我使用   .slice（）函数，它将不再出现在模板中。

您的假设不正确，因为slice

  

（...）将数组的一部分的浅表副本返回到新数组中   从开始到结束选择的对象（不包括结束）。 原始   数组将不会被修改。

要使数组变异，您需要使用splice其中

  

（...）通过删除现有元素来更改数组的内容   和/或添加新元素

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

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