Angular双向绑定在我的表单列表上工作错误?

Question

我有一个人员列表，我用a分别以两种方式绑定到一个表单上，一切都很好，但当我想绑定的人的电子邮件数组，它不工作!!它为我列表中的所有其他人设置了相同的值!

下面是我的代码:

对于firstName元素可以正常工作，但对于email

则不行。

<div class="col-md-3">
<div class="form-group">
<label>Prénom</label><span>*</span>
<input type="text" placeholder="First Name" required [(ngModel)]="listGlobalBeneficiaries[i].firstName"
[ngModelOptions]="{standalone: true}" class="form-control" id="bfirstName"
name="{{i}}_bfirstName" #bfirstName="ngModel">
<div [hidden]="bfirstName.valid || bfirstName.pristine" class="alert alert-danger">
Prénom est obligatoire
</div>
</div>
</div> 

<input _ngcontent-fsl-c265="" type="text" placeholder="First Name" required="" id="bfirstName" class="form-control ng-dirty ng-valid ng-touched" ng-reflect-required="" ng-reflect-name="1_bfirstName" ng-reflect-options="[object Object]" ng-reflect-model="name">

<div class="col-md-4" >
<div class="form-group">
<label>E-mail</label><span>*</span>
<input type="email" placeholder="Email" email
required [(ngModel)]="listGlobalBeneficiaries[i].emails![0].address"
[ngModelOptions]="{standalone: true}" class="form-control"
name="{{i}}_emailaddress" id="{{i}}_emailaddress" #emailaddress="ngModel">
<div [hidden]="emailaddress.valid || emailaddress.pristine" class="alert alert-danger">
E-mail est obligatoire
</div>
</div>
</div>

<input _ngcontent-qhm-c265="" type="email" placeholder="Email" email="" required="" class="form-control ng-dirty ng-invalid ng-touched" ng-reflect-required="" ng-reflect-email="" ng-reflect-name="2_emailaddress" id="2_emailaddress" ng-reflect-model="" ng-reflect-options="[object Object]">

Answer 1

修复了初始化电子邮件数组时出现的问题。

前:

this.listGlobalBeneficiaries[i].emails = this.init_emails;

修复:

this.listGlobalBeneficiaries[i].emails = [
{
type: 'WORK',
stillPrimary: true,
valid: true,
address: '',
},
];

因为在typescript

中对象是通过引用赋值和复制的