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:
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!
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.