Angular 编辑动态添加的值的步骤_Angular_Typescript_Angular6

Angular 编辑动态添加的值的步骤

angular typescript angular6

Angular 编辑动态添加的值的步骤,angular,typescript,angular6,Angular,Typescript,Angular6,在我的JSON文件中，我有一个名为address的变量，它包含多个对象（即多个地址）。我正在显示多个地址，如下所示：如上图所示，单击特定的地址（ex addressType:Business），我将获得该地址值（表示邮政编码，城市）在下面的输入字段上，如图所示。现在在编辑后，点击地址并点击添加按钮，编辑的地址正在保存，但输入字段应按如下方式清除：因此，我可以添加一个新地址，但如果不刷新页面，我无法清除该输入字段单击“删除”后，我必须能够删除该地址更新数据后，您需要重置表单 s

在我的

JSON

文件中，我有一个名为

address

的

变量，它包含多个对象（即多个地址）。我正在显示多个地址
，如下所示：


如上图所示，单击特定的地址
（ex addressType:Business），我将获得该地址
值（表示邮政编码，城市）在下面的输入字段上，如图所示。现在在编辑后，点击地址并点击添加按钮，编辑的地址正在保存，但输入字段应按如下方式清除：



因此，我可以添加一个新地址，但如果不刷新页面，我无法清除该输入字段

单击“删除”后，我必须能够删除该地址

更新数据后，您需要重置表单
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>

deleteRecord（i，j）{
this.contacts[i].地址.splice（j，1）；
}
姓名：{{contact.Name}


地址


....
删除



谢谢你的回答，你能帮我完成我的第二个要求吗，即删除
？检查我更新的答案是否删除。很抱歉，在第一次询问时，如果我编辑任何地址
，然后点击添加
按钮，那么我无法添加新的地址
，如果我尝试添加新的地址
它正在编辑以前编辑的地址
。请参阅此已实现的stackblitz演示：@Empty\u Soul您需要更改此模式。编辑地址后，模式
返回到添加
。