How to set ngModel within [a nested] ngFor (Angular rc2)?

Question

Premise: I tried several answers (including one I asked and accidentally accepted) but none works for me.

I have a nested ngFor inside and a nested binding via ngModel.

Issue: when I update one item in the nested ngFor the corresponding item is update also in the other nested ngFor. Example code below with comment what work and what doesn't.

template

<div *ngFor="let outerObject of outerObjects; let oIndex = index; trackBy: trackByIndex">
    {{outerObject.value}} <!-- this works -->
    <div *ngFor="let innerObject of outerObject.innerObjects; let index = index; trackBy: trackByIndex">
          <input [(ngModel)]="outerObject.innerObjects[index]"> <!-- when I change this any innerObjects[i] is updated -->
    </div>
</div>

ts

outerObjects = [
    {
       value = 'x'
       innerObjects: ['a', 'b', 'c']
    },
    {
       value = 'y'
       innerObjects: ['a', 'b', 'c']
    }
];

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

What about updating? RC.2 is quite old, unsupported since a long time, and only a few can remember how stuff worked back then. — Günter Zöchbauer, Oct 31 '16 at 09:38
You're about that but you know... time-to-market (upgrading the whole app [quite big] is not so easy) — dragonmnl, Oct 31 '16 at 09:39

score 2 · Answer 1 · answered Oct 29 '16 at 20:32

2

You have a syntax error: You must write [(ngModel)] not [(ngModel]) (notice the order of the square and ordinary brackets at the end).

After correcting that syntax error and running your code in Angular 2.1.1, it seems to be working. The databinding is only to the corresponding outerObject.innerObjects[index]

answered Oct 29 '16 at 20:32

Klas Mellbourn

42,571
24
140
158

Thanks for your answer. That was a typo (now corrected). As specified I'm working with rc2 and it doesn't work this way – dragonmnl Oct 31 '16 at 09:36

How to set ngModel within [a nested] ngFor (Angular rc2)?

1 Answers1