ng-modell in an *ngfor does not show the right value

Question

I have an JSON which is loaded into my Angular2 App.

My JSON is called tempPromotion and i try to get into ['results'] the following way:

tempPromotion['response_payload']['ruleset_list']['results']

in ['results'] are 2 values, ['value_path'] and ['calculation']

my HTML looks like this:

  <table class="table table-striped">
      <thead>
        <tr>
          <th>Value Path</th>
          <th>Result</th>
          <th>TEST</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let result of rule['results']; let x = index">
          <td><input type="text" class="form-control" id="valuePath{{x}}" [(ngModel)]="result['value_path']" name="valuePath{{x}}"></td>
          <td><input type="text" class="form-control" id="discount{{x}}" [(ngModel)]="result['calculation']" name="discount{{x}}"></td>
          <td>{{x}} {{result['calculation']}}</td>
        </tr>
      </tbody>
    </table>

to understand why i use rule, this is alreay inside an other *ngfor <div class="card" *ngFor="let rule of tempPromotion['response_payload']['ruleset_list']; let i = index">

My output looks like this

channel 1 | #Value * 0.8 | 0 #Value * 0.9 
channel 1 | #Value * 0.8 | 1 #Value * 0.8 

My [(ngModel)] shows the wrong value, while my Two-way-binding {{result['calculation']}} shows the right value.

Why is this happening and what is the solution for this Problem?

Answer 1

I got it to work.

My Problem was that i had the same id / name for my inputs.

change id="valuePath{{x}}" to id="valuePath{{i}}{{x}}" fixxed it.