Html 按索引删除不'；它不起作用。有棱角的

以下代码始终删除最后一个元素。我想同时用删除按钮创建输入字段。如何按id删除项目

TS:

HTML:

去除

---

您需要添加一个

trackBy

，以便angular可以知道删除的元素，例如

HTML

还需要注意的是，如果输入发生更改，angular将仅更新

*ngFor

指令中的UI

考虑下面

将这四个元素添加到输入中，您的输入如下所示

[true, true, true, true]

让我们移除第三个元素

[true, true, true]

如果我删除第一个元素而不是第三个元素呢

[true, true, true]

由于删除第一个和第三个元素后输入相同，因此角度优化将删除最后一个元素

现在让我们修改代码

TS

HTML

+加
去除

只要输入不相同，上述操作就有效。为了确保这始终有效，我们添加了trackBy

---

您的代码运行正常。它不会删除最后一个元素。发生的情况是，拼接方法删除数组中相应的元素，然后相应地更新数组长度。假设数组中有4个元素：

test = [0,1,2,3] //(using numbers just so its clearer)

现在我应用拼接方法，如下所示：

test.splice(2,1);

结果将是：

[0,1,3]

相应索引中的元素被删除，但数组的长度也发生了变化（我现在少了一个元素）。一旦发生这种情况，angular将使用数组的其余元素更新dom。它看起来就像是在删除最后一个元素，但它不是。

问题在于方法，而不是代码

它使用的是

数字

，或者您可以使用布尔值以外的任何

对象

类型进行检查。在无法使用索引定位要删除的值的情况下，此处的splice无法按预期工作

---

您可以从中看到：

我认为

Array.prototype.filter（）函数是实现这一点的最佳方法：


让输入=['alpha'，'beta'，'gamma'，'delta']；
设指数=2
输入=输入。过滤器（（输入，i）=>i！==索引）；
console.log（输入）；//['alpha'，'beta'，'delta']
你以前玩过吗？尝试调试
remove（）
函数，查看它实际接收到的所有参数。索引是一个数字，输入是布尔数组使用哪个版本的Angular？Angular 10。在iTunes上，
索引为i
语法，如中所建议的，对我没有帮助。也许我做错了什么。我已经把来源放在这里了。我已经编辑了一篇关于这个问题的解释，希望对你有所帮助
[true, true, true]

inputs: string[] = [];

    public addNew(): void {
    this.inputs.push('');
  }

  public remove( index: number): void {
   this.inputs.splice(index, 1);
   console.log(index);
  }

 <div class="form-row  pb-2">
   <input id="field_id" type="text" class="form-control col-sm-9" name="field_id"
              ngModel>
<button type="button" (click)="addNew()" [disabled]="inputs.length > 3" >+ Add</button>
</div>
<div *ngFor="let item of inputs; index as i" class="form-row mb-2">
  <input [(ngModel)]='inputs[i]' id="inputField{{i}}" type="text" name="inputField{{i}}" >
  <button (click)="remove(i)" type="button">Remove</button>
</div>

test = [0,1,2,3] //(using numbers just so its clearer)

test.splice(2,1);

[0,1,3]