Wierd Angular Binding Issue - Updating unrelated component

Question

I have a paginated table which contains 200+ columns with 2 columns with radiobuttongroups and one input column.

The wierd scenario I observed was that when I update the values on the first page of the table, when I navigate to a Nth page of the table, I found some values changed. When I went back to the previous page and changed the value, I found it reflected in the same field in the same Nth page. This only happens to some of the values not all and the values changed are from the same column of the table.

Any suggestions would be welcome.

<table [mfData]="smartRefactorComponents" #mfData="mfDataTable" [mfRowsOnPage]="15">
  <thead class="thead-inverse">
    <tr>
      <th class="centre-text" rowspan="2">
        <mfDefaultSorter by="name">
          Name
        </mfDefaultSorter>
      </th>
      <th class="centre-text">
        <mfDefaultSorter by="1">
          Criticality
        </mfDefaultSorter>
      </th>
      <th class="centre-text">
        <mfDefaultSorter by="2">
          Coverage
        </mfDefaultSorter>
      </th>
      <th class="centre-text">
        <mfDefaultSorter by="3">
          Code Familiarity
        </mfDefaultSorter>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of mfData.data; let i = index">
      <td>
        <div class="form-group">
          <label>{{item.name}}</label>
        </div>
      </td>
      <td>
        <app-metric #crit id="crit+{{i}}" [(srInput)]="item.userInputs.cr" (change)="updateUserInputs(i, 'cr', crit.srInput)"></app-metric>
      </td>
      <td>
        <app-metric #cov id="cov+{{i}}" [(srInput)]="item.userInputs.co" (change)="updateUserInputs(i, 'co', cov.srInput)"></app-metric>
      </td>
      <td>
        <app-metric #fam id="fam+{{i}}" [(srInput)]="item.userInputs.cd" (change)="updateUserInputs(i, 'cd', fam.srInput)"></app-metric>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="centre-text" colspan="3">
        <mfBootstrapPaginator class="pagination-lg"></mfBootstrapPaginator>
      </td>
    </tr>
  </tfoot>
</table>

  updateUserInputs(
    index: number,
    key: string,
    srInput: Inputs
  ) {
    this.components[index].userInputs[key] = srInput;
    this.store.dispatch({
      type: RequestActions.UPDATE_INPUTS,
      index: index,
      userInputs: this.components[index].userInputs,
    });
    this.logger.log(index, key, srInput);
  }

Answer 1

You are using index which is common for all pages,due to that your function "updateUserInputs(i, 'cr', crit.srInput)" is doing some strange things. I prefer to do update operation directly using object instead of using index

updateUserInputs(
item: any//you can declare your type,
key: string,
srInput: Inputs
) {
   item.userInputs[key] = srInput;
   this.store.dispatch({
     type: RequestActions.UPDATE_INPUTS,
     item: item,
     userInputs: item.userInputs,
   });
   this.logger.log(item, key, srInput);
 }

you have to change your store dispatch as well