Javascript 具有对象属性拼接的角度对象arr

有问题。我有一个具有创建和删除输入字段逻辑的组件

.ts

.html

问题是：我的拼接像shift一样工作，它删除了arr中的最后一个元素

我需要，删除一个字段，就是我的加号按钮所在的字段。若有任何值，在我要删除的输入字段中，我也需要删除一个值；

---

我已经检查了你的stackbliz。。 你的代码运行得很好。。 为了调试，我添加了一些代码。。 请检查下面的一个

  addRes(resource: Resource) {
    resource.resourceInputFields = [ ""+resource.resourceInputFields.length,...resource.resourceInputFields];
    console.log(resource.resourceInputFields);
  }

  removeRes(resource: Resource, index: number) {
      resource.resourceInputFields.splice(index, 1);
     console.log(resource.resourceInputFields);
  }

---

我查过你的stackbliz。。 你的代码运行得很好。。 为了调试，我添加了一些代码。。 请检查下面的一个

  addRes(resource: Resource) {
    resource.resourceInputFields = [ ""+resource.resourceInputFields.length,...resource.resourceInputFields];
    console.log(resource.resourceInputFields);
  }

  removeRes(resource: Resource, index: number) {
      resource.resourceInputFields.splice(index, 1);
     console.log(resource.resourceInputFields);
  }

---

您的问题只是在输入数组中使用我喜欢的索引标签。 减号按钮删除正确的输入。 您可以在这个修改版本中看到它，带有固定的索引标签：

字符串标签是在testArr中动态创建的：

export class AppComponent  {
  name = 'Angular ' + VERSION.major;
   resource: Resource[] = [];
   resourceValues = [];
  fieldId = 0;
  testArr = [];

  ngOnInit() {
    this.resource = this.getResource();
  }

  addRes(resource: Resource) {
    this.resourceValues.push('');
    if (this.testArr.length) {
      this.testArr.push((+this.testArr[this.testArr.length - 1] + 1).toString());
    } else {
      this.testArr.push(0);
    }
    resource.resourceInputFields = ['', ...resource.resourceInputFields];
  }

  removeRes(resource: Resource, index: number) {
    resource.resourceInputFields.splice(index, 1);
    this.testArr.splice(index, 1);
    this.resourceValues.splice(index, 1);
    // console.log(this.resourceValues);
  }

  getResource(): Resource[] {
    return [
      {
        resourceLink: 'link',
        resourceInputFields: [],
        resourceId: '',
      },
    ];
  }
}

在模板中使用数组，而不是索引，如标签：

{{ testArr[i] }}

编辑：

---

对于另一个问题，您错过了双向数据绑定。 您必须放置[ngModel]，而不是[ngModel]，此外，您还需要一个可编辑的属性，以便在我的示例中保留输入值this.resourceValues的信息

更新的stackblitz中的一个示例：

参考：

---

您的问题只是在输入数组中按我喜欢的标签使用索引。 减号按钮删除正确的输入。 您可以在这个修改版本中看到它，带有固定的索引标签：

字符串标签是在testArr中动态创建的：

export class AppComponent  {
  name = 'Angular ' + VERSION.major;
   resource: Resource[] = [];
   resourceValues = [];
  fieldId = 0;
  testArr = [];

  ngOnInit() {
    this.resource = this.getResource();
  }

  addRes(resource: Resource) {
    this.resourceValues.push('');
    if (this.testArr.length) {
      this.testArr.push((+this.testArr[this.testArr.length - 1] + 1).toString());
    } else {
      this.testArr.push(0);
    }
    resource.resourceInputFields = ['', ...resource.resourceInputFields];
  }

  removeRes(resource: Resource, index: number) {
    resource.resourceInputFields.splice(index, 1);
    this.testArr.splice(index, 1);
    this.resourceValues.splice(index, 1);
    // console.log(this.resourceValues);
  }

  getResource(): Resource[] {
    return [
      {
        resourceLink: 'link',
        resourceInputFields: [],
        resourceId: '',
      },
    ];
  }
}

在模板中使用数组，而不是索引，如标签：

{{ testArr[i] }}

编辑：

---

对于另一个问题，您错过了双向数据绑定。 您必须放置[ngModel]，而不是[ngModel]，此外，您还需要一个可编辑的属性，以便在我的示例中保留输入值this.resourceValues的信息

更新的stackblitz中的一个示例：

参考：

---

拼接操作按预期工作。但是，由于要在html模板中呈现数组的索引，因此感觉数组正在移动。如果将addRes方法内的行替换为：resource.resourceInputFields=[${Math.random}，…resource.resourceInputFields]；你会看到正确的元素被删除了。你能在我的stackbiz中给我看一下吗，我没有检查出来：是的，你是对的，工作正常，删除正确的字段。所以我认为，我应该重构我的addRes方法。拼接操作按预期工作。但是，由于要在html模板中呈现数组的索引，因此感觉数组正在移动。如果将addRes方法内的行替换为：resource.resourceInputFields=[${Math.random}，…resource.resourceInputFields]；你会看到正确的元素被删除了。你能在我的stackbiz中给我看一下吗，我没有检查出来：是的，你是对的，工作正常，删除正确的字段。所以我想，我应该重构我的addRes方法。但是当我在输入中写入一些东西，并试图删除它时，它删除了一个字段，而不是一个值。我不明白是什么；这有什么问题吗。我想知道如何修复它。如果你知道，请告诉我。试试我的代码的u'r stackbiz版本，在输入中写一些东西，然后删除它，你会看到一个问题。对于另一个问题，你错过了双向数据绑定。在我的示例中，您需要放置[ngModel]而不是[ngModel]，此外，您还需要一个可编辑属性来保留输入值this.resourceValues的信息。但是，当我在输入中写入某些内容并尝试删除它时，它会删除一个字段而不是一个值。我不明白是什么；这有什么问题吗。我想知道如何修复它。如果你知道，请告诉我。试试我的代码的u'r stackbiz版本，在输入中写一些东西，然后删除它，你会看到一个问题。对于另一个问题，你错过了双向数据绑定。您必须放置[ngModel]，而不是[ngModel]，此外，您还需要一个可编辑的属性，以便在我的示例中保留输入值this.resourceValues的信息。