我有一个页面,用户可以在其中从组合框中选择他们偏好的值。他们还可以选择添加更多首选项,以便组合框的数量无法固定。
在我的 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;
}
问题是对象结构现在将以两种方式发生变化。
某些字段将被封装到 JSON 载体中的子部分中。我可以通过调用
update('subsection', $event.target.value)
来处理这个问题随后在方法中通过 if/else 进行手动控制,尽管我确信有更好的方法来做到这一点。用户将能够单击按钮并生成
<span>Feature 2</span>
,<span>Feature 3</span>
我不知道如何生成这些字段(除了在 DOM 中物理附加它们之外),以便它们可以绑定(bind)到 TS 文件中 JSON 持有者中的数组。
我用谷歌搜索了一下,看到很多关于导入的讨论 Model
,使用ngmodel
, ng-model
遗憾的是,我还没有找到相关的部件来执行这样的绑定(bind)。我真的很想了解事情发生的原因以及如何以正确的方式处理它们(这在 RC 或测试版中不是有效的过时方法)。可悲的是,我觉得我不够聪明,无法掌握它,我需要帮助来阐明已经存在的内容。如果造成困扰,请提前表示歉意。 (我真的很尊重避免你尝试过什么并向我们展示一些代码。)
最佳答案
您可以从 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
关于javascript - 如何在 Angular2 中创建多个控件并将其绑定(bind)到一个字段对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42996017/