ネストされたモデル - 角度2

Question

私は、人が複数の住所を持つことができるシナリオを持っています。選択されたアドレスタイプのフルアドレスがテキストエリアに表示されている場合、ドロップダウンにアドレスタイプを表示します。

<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つのブロックのドロップダウン値を選択すると、他のブロックのテキスト領域にも入力されます。

1つのブロックでドロップダウンを選択すると、ブロック内にのみテキスト領域が挿入されます。このシナリオをどのように処理するか

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