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);
  }

Could you post a screenshot or sample values as to what is happening — TruckDriver
– TruckDriver, Commented Oct 27, 2017 at 7:29

Venkatesh Konatham · Accepted Answer · 2017-10-27 07:51:58Z

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

edited Oct 27, 2017 at 7:51

answered Oct 27, 2017 at 7:37

Venkatesh Konatham

8286 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhruvan Ganesh Over a year ago

Worked!! Awesome :)

Venkatesh Konatham Over a year ago

Good to hear :)

Collectives™ on Stack Overflow

Wierd Angular Binding Issue - Updating unrelated component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related