How to set bindings in ngFor in Angular 2?

Question

NOTE: I found several similar questions but none really answered my (generic) question

I have this

component.ts

first: string;
second: string;
third: string;
fields = ["first", "second", "third"];

I want to be able to generate in component.html a complex component (without importing a custom-defined directive) which includes:

Required: ngModel binding based on fields[i]

(e.g. i = 0, fields[i] = "first", ngModel = first)
Desiderable: use fields[i] as strings to assign to any DOM element property (e.g.

The loop looks like this:

 <div *ngFor="let field of fields">
      <label for="???>
      [(ngModel)]="???"
 </div>

As for the 2nd point, it works with id and as content of the div.

However...

in the case of ngModel: [(ngModel)] = "field" leads to an exception (Cannot assign to a reference or variable!)
in the case of assigning a string to (for example)
```
 <label for="{{field}}">,
```
I get an exception as well (Can't bind to 'for' since it isn't a known native property (" i">)

For the first part, have you tried a one-way binding with `[for]="field"`? — jonrsharpe, Sep 06 '16 at 11:32
that works for RC6 (that I can't test for now) according to Gunter answer. — dragonmnl, Sep 06 '16 at 15:16

Günter Zöchbauer · Accepted Answer · 2016-12-09T04:27:03.433

2

>=RC.6

 <label for="{{field}}">
 <label [for]="field">

<=RC.5

 <label attr.for="{{field}}">
 <label [attr.for]="field">
 <label [htmlFor]="field">

update

<div *ngFor="let field of fields; let i=index; trackBy:trackByIndex">
  <label htmlFor="field">
  <input [(ngModel)]="fields[i]">
</div>

and add this to the component

trackByIndex(index: number, obj: any): any {
  return index;
}

edited Dec 09 '16 at 04:27

answered Sep 06 '16 at 11:34

Günter Zöchbauer

623,577
216
2,003
1,567

thanks @Gunter. but this doesn't answer my main question (about ngModel) – dragonmnl Sep 06 '16 at 15:14
I updated my answer. If you get an error please post the exact error message. – Günter Zöchbauer Sep 06 '16 at 15:25
Gunter, the example is: take the current element from ngFor (let element of elements). element is a string (there is an example in my question). I want to assign that string to [(ngModel)] as it was the name of a property of the "controller" (in the .ts file I would use this["string"]). Is it clearer? – dragonmnl Sep 06 '16 at 15:25
I tried with index. it in fact works. but multiple elements (the generated divs) take the same NgModel (when I update one – dragonmnl Sep 06 '16 at 15:26
I see. That's an issue with primitive values. I updated my answer. You don't need this `trackBy` stuff if the items in `fields` are objects. – Günter Zöchbauer Sep 06 '16 at 15:45
I can't test it now but assuming it works, I'll accept the answer when I catch up on this ;) – dragonmnl Sep 06 '16 at 16:10
1

Im confused, is your ngModel attribute not attached to any tag? Does this mean something special or a typo? – parliament Dec 09 '16 at 02:04
Thanks for the hint. I just copied the code from the question and missed that mistake. – Günter Zöchbauer Dec 09 '16 at 04:28
I'm trying your updated answer but I'm losing focus on every keypress in the input field. – Chris Apr 20 '17 at 19:28
You mean with `trackBy`? Can you create a Plunker that demonstrates the issue? – Günter Zöchbauer Apr 20 '17 at 19:33

How to set bindings in ngFor in Angular 2?

1 Answers1

Linked