アレイ - 2

Question

この角度は、私はデータオブジェクトが複数の人を持っているシナリオを持っている他のポストNested Model - Angular 2

からリードされ、各人は、複数のアドレスを有することができます。選択されたアドレスタイプのフルアドレスがテキストエリアに表示されている場合、ドロップダウンにアドレスタイプを表示します。

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

それぞれの人物が各divブロックに表示されます。 div 'Person A'のドロップダウンを選択したとき。 div 'Person B'のtextareaに値を設定します。このシナリオをどのように処理するのですか？

同じ親のdiv内のアドレスコレクションの問題が修正されました。 ここでは人物コレクションの周りに問題があります。親Aのドロップダウンを選択しようとすると、親Bにもテキストエリアが設定されます。

Answer 1

2次元配列を持つことができますが、よりクリーンな実装を得るためにリファクタリングを行うことを検討してください。

初期selectedAddressは次のように：selectedAddress = [[]]とそう：

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

私はexacltyがわからない場合は（ngModelChange）= "selectedAddress [I] [J] = $イベント" アップデートというselectedAddress [i] [j]が選択されていない場合、selectedAddress [i] [j] .addressはクラッシュします。しかし、私は、最後の解決策がこれをうまく働かなければならないと思います。クラッシュした場合は、空のオブジェクトで配列を初期化します。しかし、私は繰り返すが、この解決策はちょっと難しいものになっている。