I am working with a JSON file in my Angular2 App.
The specific JSON object I am referring to is named tempPromotion and I am trying to access the data within ['results'] like this:
tempPromotion['response_payload']['ruleset_list']['results']
Within ['results'], there are two values, ['value_path'] and ['calculation']
This is how my HTML code looks:
<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>
It's important to note that I am using rule because it is already inside another *ngfor loop here:
<div class="card" *ngFor="let rule of tempPromotion['response_payload']['ruleset_list']; let i = index">When I look at the output, it appears like this:
channel 1 | #Value * 0.8 | 0 #Value * 0.9
channel 1 | #Value * 0.8 | 1 #Value * 0.8
Although my [(ngModel)] displays incorrect values, the Two-way binding {{result['calculation']}} shows the correct values.
If someone could explain why this discrepancy exists and offer a solution, I would greatly appreciate it.