Angular2 ngModel inside of ngFor

Question

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

        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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.

Answer 3

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