嵌套模型-Angular 2 [英] Nested Model - Angular 2

问题描述

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

I have a scenario, where persons can have multiple address. Showing address type in dropdown, when select address type full address is shown on text area.

<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块中.在一个块上选择下拉值时，也会在其他块上填充文本区域.

Each person is displayed in each div block. when selecting drop down value on one block populates the text area in other blocks also.

选择一个块上的下拉菜单时，应仅在块内填充文本区域.如何处理这种情况

When selecting drop down on one block should populate text area only inside the block. How to handle this scenario

推荐答案

您必须使用一系列选定地址进行处理.就像这样-其中selectedAddress是一个数组:

You have to handle it with an array of selected address'es. This would be like so - where selectedAddress is an array:

<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>

这篇关于嵌套模型-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！