Javascript 所有数组值相同时的拼接问题

我已经创建了一个空数组，我使用它来循环动态添加和删除表单上的文本框

mobiles: Array<string> = [];

<ng-container *ngFor="let mobile of mobiles; index as i">
// Code
</ng-container>

而

removelement（index）

函数从数组中删除索引

this.mobiles.push('');

if (index in this.mobiles) {
    this.mobiles.splice(index, 1);
}

这段代码的问题在于，由于数组中的所有值都相同（为空），

splice（）

不是删除指定索引处的元素，而是删除数组中的最后一个元素。因此，它也删除了最后一个文本框，而不是我单击的文本框

我测试了在数组中推送非空值，但结果仍然相同。仅当我推送不同的值时，它才能正常工作，例如：

this.mobiles.push(this.mobiles.length);

然而，我不想使用这种方法，因为我计划用实际的电话号码填充这个数组

还有别的选择吗

我的角度版本是7.2.15

谢谢大家!

---

演示：

解决该问题的一个方法是将每个值包装到一个对象中。

ngFor

循环中每个项目的值将成为对象的引用。由于这些引用都不同，目标项将按预期删除

使用此界面：

interface Phone {
  phoneNumber?: string;
}

您可以定义

Phone

对象的数组：

mobiles: Array<Phone> = [];

addElement() {
  this.mobiles.push({});
}

removeElement(index) {
  this.mobiles.splice(index, 1);
}

get phoneNumbers() {
  return this.mobiles.map(x => x.phoneNumber);
}

---

有关演示，请参阅。

如果您正确实现了该函数，那么您的方法似乎是完美的。拼接功能只会删除指定的索引，我相信问题出在其他地方。你能提供一个用例演示吗？给你@Arcteezy:。正如我前面提到的，它正在工作，最后一个元素被移除，而不是我单击的元素。它正在移除数组中的正确位置，但是，由于您没有将输入字符串保存到集合中，因此看起来您正在从底部删除，但实际上并非如此。请参见此处：@joelgullander这只能正常工作，因为您正在数组中添加不同的值。正如我前面提到的，我正在积极地避免这样做。这是完美的，因为如果我想/需要的话，我还可以单独存储国家/地区的电话号码。回答得很好，非常感谢！

interface Phone {
  phoneNumber?: string;
}

mobiles: Array<Phone> = [];

addElement() {
  this.mobiles.push({});
}

removeElement(index) {
  this.mobiles.splice(index, 1);
}

get phoneNumbers() {
  return this.mobiles.map(x => x.phoneNumber);
}