编辑动态添加的值

Question

在我的JSON文件中，我有一个名为variable的{​​{1}}，其中包含多个对象（即多个地址）。我正在显示多个address，如下所示：

• 如上图所示，单击特定的address（例如addressType：Business）后，我在下面的输入字段中得到了address值（即postalCode，City），如图片。现在address之后editing并点击编辑了address的 add 按钮时，正在保存，但应该像这样清除address：< / li>

这样我可以添加一个新地址，但是我无法在不刷新页面的情况下清除该输入字段

• 点击删除，我必须能够删除该地址

DEMO

Answer 1

更新数据后，您需要reset表单。

saveAddress(index, form: FormGroup) {
    if (this.mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
      form.reset();
    } else if (this.mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
      form.reset();  // Form reset here
    }
  }

要删除-

deleteRecord(i, j){
    this.contacts[i].addresses.splice(j, 1);
  }

<div class="main" *ngFor="let contact of contacts;let i = index">

<form [formGroup]="addForm" #myForm>

  <p>Name: {{contact.name}}</p>
  <br>
<!--Address section-->
      <div  class="address-sec">
        <p id="addr">Addresses</p>
        <br>
        <table style="width:100%" *ngFor="let addr of contact.addresses; let j = index">
            <tr>
                ....
                <td>
                    <div class="field-data" (click)='deleteRecord(i,j)'>
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>