使用ngModel绑定动态生成的输入

Question

I'm fairly new to Angular so bear with me if I have some rookie mistakes here :) I am dynamically adding inputs based on some properties that need to be filled out (this.properties) and I want to bind each of those dynamic inputs to some object (this.selectedProperties = {}) so that I end up with something like this.

this.properties = [new MyData { name = "theName", examples = "theExamples" },
                   new MyData { name = "anotherName", examples = "moreExamples" }];
this.selectedProperties = { "theName": "valueFromBinding", "anotherName": "anotherValueFromBinding" }

Here's a slimmed down version of what I have so far. Everything is working other than the ngModel to set the selected values.

<div *ngFor="let property of this.properties">
    <label>{{property.name}}</label>
    <input type="text" placeholder="{{property.examples}}"
       [ngModel]="this.selectedProperties[property.name]" 
       name="{{property.name}}Input">
</div>

Thanks!

Answer 1

Try like this :

component.html

<div *ngFor="let property of properties">
    <label>{{property.name}}</label>
    <input type="text" placeholder="{{property.examples}}" [ngModel]="selectedProperties[property.name]" name="{{property.name}}Input">
</div>

component.ts

export class AppComponent {
    properties = [
        new MyData { name: "theName", examples: "theExamples" },
        new MyData { name: "anotherName", examples: "moreExamples" }
    ];

    selectedProperties = {
        "theName": "valueFromBinding",
        "anotherName": "anotherValueFromBinding"
    };
}

Answer 2

事实证明，我需要两种方式的绑定，以便当用户在用户界面中对其进行更改时，selectedProperties [property.name]会更新