具有对象属性拼接的角度对象数组答案

【问题标题】：Angular object arr with splice of object property具有对象属性拼接的角度对象数组
【发布时间】：2020-10-15 17:26:46
【问题描述】：

有问题。我有一个组件，其中包含一些创建和删除输入字段的逻辑

.ts

export class AppComponent implements OnInit {
  resource: Resource[] = [];
  fieldId = 0;
  testArr = ['1', '2', '3', '4'];

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

  addRes(resource: Resource) {
    resource.resourceInputFields = ['', ...resource.resourceInputFields];
    console.log(this.resource);
  }

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

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

export interface Resource {
  resourceLink: string;
  resourceId: string;
  resourceInputFields: string[];
}

.html

<div *ngFor="let res of resource">
  <a>{{ res.resourceLink }}</a>
  <button class="btn" (click)="addRes(res)">+</button>
  <div class="fields">
    <div *ngFor="let resourceField of res.resourceInputFields; index as i">
      {{ i }}
      <input type="text" [ngModel]="resourceField" />
      <button class="btn" (click)="removeRes(res, i)">-</button>
    </div>
  </div>
</div>

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

我需要删除一个字段，正是我的加号按钮所在的位置。如果有任何值，在我要删除的输入字段中，我也需要删除一个值； stackbiz

【问题讨论】：

拼接操作按预期工作。但是，由于您在 html 模板中呈现数组的索引，因此感觉数组正在移动。如果将 addRes 方法中的行替换为：resource.resourceInputFields = [${Math.random()}, ...resource.resourceInputFields]; 你会看到正确的元素被删除了。
你能在我的 stackbiz 中显示我吗，我没有得到
查看：stackblitz.com/edit/angular-ivy-u9karw
是的，你说得对，它工作正常并删除正确的字段。所以我认为，我应该重构我的 addRes 方法。

标签： javascript arrays angular typescript object

【解决方案1】：

我已经检查了你的 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);
  }

【讨论】：

【解决方案2】：

您的问题仅在于在输入数组中使用“index as i”之类的标签。减号按钮删除正确的输入。您可以在这个修改后的版本中看到它，带有固定的索引标签：

https://stackblitz.com/edit/angular-splice-input-array?file=src/app/app.component.ts

字符串标签在 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 中的一个示例： https://stackblitz.com/edit/angular-splice-input-array?file=src%2Fapp%2Fapp.component.ts

参考： https://angular.io/guide/forms

【讨论】：

但是当我在输入中写一些东西并尝试删除它时，它会删除一个字段而不是一个值。我无法理解它有什么问题。并且知道如何解决它。如果你知道，请告诉我。在你的 stackbiz 版本的代码中尝试，在输入中写一些东西然后删除它，你会发现有问题。
对于另一个问题，您错过了双向数据绑定。您必须放置 [(ngModel)] 而不是 [ngModel]，此外，您还需要一个可编辑的属性来保存输入值的信息（在我的示例中为 this.resourceValues）。