javascript - 如何在 Angular2 中创建多个控件并将其绑定(bind)到一个字段对象？

Question

我有一个页面，用户可以在其中从组合框中选择他们偏好的值。他们还可以选择添加更多首选项，以便组合框的数量无法固定。

在我的 TS 文件中，我有一个对象将控件中的数据保存为字段。到目前为止，我使用以下技巧在控件更改其值时更新它。

<span>Feature</span>
<input (change)="update('nick', $event.target.value)">
<select (change)="update('type', $event.target.value)">
  <option value="1">Uno</option>
  <option value="2">Duo</option>
  <option value="3">Tri</option>
</select>

preferences: Prefs = {};

update(property, value) {
  this.userCreated[property] = value;
}

问题是对象结构现在将以两种方式发生变化。

1. 某些字段将被封装到 JSON 载体中的子部分中。我可以通过调用update('subsection', $event.target.value)来处理这个问题随后在方法中通过 if/else 进行手动控制，尽管我确信有更好的方法来做到这一点。

2. 用户将能够单击按钮并生成 <span>Feature 2</span> , <span>Feature 3</span>我不知道如何生成这些字段(除了在 DOM 中物理附加它们之外)，以便它们可以绑定(bind)到 TS 文件中 JSON 持有者中的数组。

我用谷歌搜索了一下，看到很多关于导入的讨论 Model ，使用ngmodel , ng-model遗憾的是，我还没有找到相关的部件来执行这样的绑定(bind)。我真的很想了解事情发生的原因以及如何以正确的方式处理它们(这在 RC 或测试版中不是有效的过时方法)。可悲的是，我觉得我不够聪明，无法掌握它，我需要帮助来阐明已经存在的内容。如果造成困扰，请提前表示歉意。 (我真的很尊重避免你尝试过什么并向我们展示一些代码。)

Answer 1

您可以从 Controller 中的某些状态获取可用选项。然后您只需向该模型添加一个新选项，DOM 将使用所述数据重新渲染。

values = [{key: 1, name: 'Uno'}, {key: 2, name: 'Two'}]

<select (change)="update('type', $event.target.value)">
    <option *ngFor="let value of values" [value]="value.key">{{value.name}}</option>
</select>

向values添加新值会重新渲染dom