動的データの設定方法

Question

https://plnkr.co/edit/7hOOoJNYvx4K91yKWqYj?p=preview

私はこの機能が働いていません。私はこれを行うと、その後働いている：

data = { Alice: {}, Bob: {}} 

<div *ngFor="let person of people"> 
    <h1>{{person}}</h1> 
    <div> 
    Material 
    <select [(ngModel)]="data[person].material" (ngModelChange)="materialChange($event, person)"> 
     <option *ngFor="let material of materials" [value]="material">{{material}}</option> 
    </select> 
    </div> 
    <div> 
    Colours 
    <select [(ngModel)]="data[person].chosenColour"> 
     <option *ngFor="let colour of data[person].colours" [value]="colour">{{colour}}</option> 
    </select> 
    </di 

私は動的なデータを必要とするので、私は..私は固定値を必要といけない必要がありますそのどのくらいのデータを知らないので、どのように私は、これを書き換えることができます。なにか提案を？私が代わりに

data = { Alice: {}, Bob: {}} 

あなたpeople配列の長さが

people = ['Alice', 'Bob'] 

がnであることを理解していますし、あなたはそれがdataオブジェクトを反映するために何をしたいから

Answer 1

。

だから、あなたが何ができるか、people配列をマッピングし、自身が空のオブジェクトを保持して、オブジェクトのプロパティとして各文字列値を挿入することです：

this.people.map(x => this.data[x] = {}) 

データが今、あなたをもとになります。この方法例はPlunkerのハードコードdataのように見えます。