Question

场景：

下面是我的json文件，名为contacts：

[
   {
     "name": "Ailis Wyld",
     "addresses": [
        {
            "addressType": "Business",
            "city": "Lansing",
            "postalCode": "48930"
        },
        {
            "addressType": "Home",
            "city": "Young America",
            "postalCode": "55573"
        }
     ]
  },
  {
    "name": "Aksel",
    "addresses": [
        {
            "addressType": "Business",
            "city": "Battle Creek",
            "postalCode": "49018"
        },
        {
            "addressType": "Home",
            "city": "Memphis",
            "postalCode": "38131"
        }
    ]
   },
   {
     "name": "Dearan",
     "addresses": [
        {
            "addressType": "Other",
            "city": "Minneapolis",
            "postalCode": "55417"
        },
        {
            "addressType": "Other",
            "city": "Sacramento",
            "postalCode": "95833"
        }
    ]
   }

]

我正在显示name的{{1}}和address（对于一位以前的特定联系人），如下所示：

预期结果：

我正在显示许多contacts，如果我单击特定的addresses（对于前addressType：主页），我必须能够编辑address表示我应该获得该地址值（i，在以下输入字段中输入addressType，city，postalCode）：

以便我可以编辑和更新该特定地址。

然后，我应该能够从该输入字段中添加新的地址。

以下是我的堆叠闪电战 DEMO

Answer 1

在Angular中使用表单时，请尝试从表单指令days，FormGroup等访问和处理数据。

在您的代码中，您组合了来自简单联系人数组的数据输出，然后尝试将其与表单控件混合。

为所有表单正确创建表单组，以使其与您的界面匹配，然后在表单中使用其中的数据，尤其是如果您能够在表单中对其进行修改的话。

在输入等上使用FormArray，正在根据用户输入修改数据，因此您可以使用formControl属性对其进行检索。当您将数据分组到formGroups中时，您可以使用.value访问所有随后的聚合数据，其中您创建的所有结构和数据都将位于其中。

我已经更新了您的堆叠闪电战。随着我已经告诉部分实施。以这种方式继续，您将获得可维护且易于阅读的代码。

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-l6awjk?file=src/app/app.component.html

更新

stackblitz中的地址编辑示例： https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-w9ty9b?file=src/app/app.component.html

Answer 2

尝试这个online example

我更改了这些：

如果选择了地址，则使用更新模式；如果未选择地址，则添加模式
添加您的表单数据到特定索引的联系人数组
更新所选地址

  selectAddr(addr) {
    this.newAttribute.addressType = addr.addressType;
    this.newAttribute.postalCode = addr.postalCode;
    this.newAttribute.city = addr.city;

    this.selectedAddr = addr;
  }

  saveAddress(index, form: FormGroup) {
    const mode: 'update' | 'add' = this.selectedAddr ? 'update' : 'add';

    if (mode === 'add') {
      this.contacts[index].addresses.push({ ...this.newAttribute });
    } else if (mode === 'update') {
      Object.assign(this.selectedAddr, this.newAttribute);
    }

    // reset
    this.selectedAddr = undefined;
    form.reset();
  }

<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">
            <tr>
                <td>
                  <div id="field-type">
                      <mat-chip-list>
                        <mat-chip color="primary" (click)="selectAddr(addr)" selected>{{addr.addressType}}</mat-chip>
                      </mat-chip-list>
                  </div>
                </td>
                <td>
                    <div class="field-data">
                   {{addr.city}}-{{addr.postalCode}}
                </div>
                  </td>
                <td>
                    <div class="field-data">
                    <b>Delete</b>
                   </div>
                </td>
            </tr>
          </table>
        <hr>
        <br>
      </div>
  <br>
  <!--Address Section-->

  <mat-form-field>
    <mat-select formControlName="addressType" placeholder="Type" [(ngModel)]="newAttribute.addressType">
        <mat-option *ngFor="let addressType of addresstypes" [value]="addressType.value">
            {{addressType.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
			
<br>
     
<mat-form-field >
    <input matInput formControlName="postalCode"  [(ngModel)]="newAttribute.postalCode"  placeholder="Postal Code" >
</mat-form-field>
<br>
<mat-form-field >
    <input matInput formControlName="city"  [(ngModel)]="newAttribute.city"  placeholder="City" >
</mat-form-field>
<br>

     <br><br><br><br>
        <button mat-flat-button    (click)="saveAddress(i,myForm)">Save</button>
</form> 
<br>
<hr>
</div>

如何编辑和更新动态添加的输入值

2 个答案: