Question

我有一个带有以下html的编辑组件：

<form #productForm="ngForm" (ngSubmit)="save(productForm.value)">
...    
  <table>
    <thead>
    <tr>
      <th>blah</th>
      <th>blah</th>
      <th>blah</th>`
      <th>blah</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let contact of product.contacts; let i = index">
      <input type="hidden" [(ngModel)]="contact.id" name="contact[{{i}}].id"/>
      <td>
        <input [(ngModel)]="contact.contact" type="text" name="contact[{{i}}].contact"/>
      </td>
      <td>
        <input [(ngModel)]="contact.email" type="text" name="contact[{{i}}].email"/>
      </td>
      <td>
        <input [(ngModel)]="contact.phone" type="text" name="contact[{{i}}].phone"/>
      </td>
      <td>
        <button type="button" (click)="deleteContact(i)">Delete</button>
      </td>
    </tr>
    </tbody>
  </table>

  <button type="button" (click)="addContact()">Add</button>    
  <button type="submit">Save</button>
</form>

这是deleteContact(i)方法实现：

 deleteContact(index) {
    this.product.contacts.splice(index, 1);
 }

当我有两个联系人行，并且在检查元素时删除第一行，第二行输入的索引递减并从

更新

<input _ngcontent-c1="" type="text" ng-reflect-name="contact[1].contact" ng-reflect-model="" class="ng-pristine ng-valid ng-touched">

到

<input _ngcontent-c1="" type="text" ng-reflect-name="contact[0].contact" ng-reflect-model="" class="ng-pristine ng-valid ng-touched">

但是，当我单击“保存”时，我方法中的form参数仍会将所有联系人信息保留为索引为1 - "contact[1].contact"的键。我在deleteContact方法的末尾添加了这一行，尝试了this workaround：

this.product.contacts = this.product.contacts.slice();

我也尝试使用ChangeDetectorRef.detectChanges()，但没有任何帮助。我无法理解为什么索引在前端自动递减，以及为什么旧索引在params中。有什么想法吗？

感谢。

Answer 1

您可以通过过滤来实现删除：

deleteContact(_index) {
   this.product.contacts = this.product.contacts.filter((element, index) => index !== _index);
}

Answer 2

按功能尝试自定义曲目。

*ngFor="let contact of product.contacts; let i = index; trackBy: customTB"

customTB(index, item) {
  return index + ' - ' + item.id;
}

在循环中使用ng Model时，总会发生这种情况。

此外，您需要像这样使用ngModel

[(ngModel)]="product.contacts[i].id"

从表中删除行时未检测到数组更改

2 个答案: