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

我怎么能重写这个因为我需要动态数据，因为我不知道我将拥有多少数据..我不需要固定值。有什么建议吗？

Answer 1

从我的理解而不是

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

您的people数组长度为n

people = ['Alice', 'Bob']

并且您希望它反映data对象。

所以你可以做的是映射people数组并将每个字符串值作为对象的属性插入，该对象本身包含一个空对象：

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

这样，数据现在将基于您的示例看起来像 Plunker 中的硬编码data。

如何设置动态数据？

1 个答案: