Angular2 ngModel inside of ngFor

问题

I am trying to bind an array of strings from my inputs, so in the html file I wrote this:

<div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

But this didn't work as expected because when I log the words variable it show an empty array as initialized in my Component class. Also, I log the variable from another component should that supposed to be the issue for my problem. I have two components:

The form component that contains an array of query components.
The query child component that has an array of words strings.

So, the words variable is declared into the queries component but I am logging this variable through the form component like this:

console.log(JSON.stringify(this.queries));

While queries is an array of Query in the form component:

queries:Query[] = [];

Thanks for your help!

回答1:

The problem is with using an array of primitive values (words) in ngFor.

You can change words to an array of objects like

words = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}];

and use it like

  <div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in].value"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

This might also be solvable using trackBy but I'm not sure.

回答2:

Each input tag has to have a unique 'name' attribute defined, as described in:

Angular2 ngModel inside ngFor (Data not binding on input)

Here is the corrected code:

<div *ngFor="let word of words; let in=index" class="col-sm-3">
  <div class="form-group">
    <input type="text" [(ngModel)]="words[in]" name="word{{in}}" class="form-control" [attr.placeholder]="items[in]" required>
  </div>

回答3:

Solved this by using the @Input() function and passing the queries array + the query index number. Thank you guys for the support.

来源：https://stackoverflow.com/questions/38423663/angular2-ngmodel-inside-of-ngfor

标签

data-binding

angular

angular2-ngmodel