嵌套模型 - Angular 2

时间:2017-10-19 19:41:10

标签: angular

我有一个场景,人们可以有多个地址。当在文本区域中显示选择地址类型完整地址时,在下拉列表中显示地址类型。

<div *ngFor="let person of persons">

  <select [ngModel]="selectedAddress" (ngModelChange)="selectedAddress = $event">
     <option *ngFor="let address of person.addresses" [ngValue]="address">
         {{address.type}}
     </option>
  </select>

   <textarea [(ngModel)]="selectedAddress.address"></textarea>

</div>

每个人都显示在每个div块中。当在一个块上选择下拉值时,也会填充其他块中的文本区域。

当选择一个块上的下拉列表时,应仅在块内填充文本区域。如何处理这种情况

1 个答案:

答案 0 :(得分:1)

你必须使用一系列选定的地址来处理它。这就是这样 - selectedAddress是一个数组:

<div *ngFor="let person of persons; let i = index">
  <select [ngModel]="selectedAddress[i]" (ngModelChange)="selectedAddress[i] = $event">
    <option *ngFor="let address of person.addresses" [ngValue]="address">
        {{address.type}}
    </option>
  </select>
  <textarea [(ngModel)]="selectedAddress[i].address"></textarea>
</div>