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

Question

I have a page where the user picks a value for their preference from a combox. They also have the option to add more preferences, so that the number of comboxes can't be fix.

In my TS file, I have an object that holds the data from the controls as fields. Up to now, I used the following trick to update it when a control changed its value.

<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;
}

The problem is that the object structure will change now in two ways.

1. Some fields will be encapsulated into subsections in the JSON carrier. I can handle that by calling update('subsection', $event.target.value) followed by a manual control by if/else in the method, although I'm sure there's a better way to do that.

2. The user will be able to click a button and generate <span>Feature 2</span> , <span>Feature 3</span> etc. I'm lost at how to generate those fields (other than physically appending them in the DOM) so that they can be bound to an array in the JSON holder in the TS file.

I've googled it and I've seen quite a lot talking about importing Model , using ngmodel , ng-model etc. Regrettably, I haven't managed to pick up the relevant parts to perform such a binding. I really want to understand why things happen and how to handle them in a proper way (that isn't an outdated approach valid in RC or betas). Sadly, I feel that I'm not bright enough to grasp it and I need help elaborating what's already out there. Sorry in advance if it causes annoyance. (I really respect avoiding what have you tried and show us some code .)

Answer 1

You could derive you available options from some state in your controller. Then you only have to add a new option to that model and the DOM will be re-rendered with said data.

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>

adding a new value to values would rerender the dom