奇怪的 Angular 绑定问题 - 更新不相关的组件

Question

我有一个分页 table，其中包含 200 多列，其中 2 列带有单选按钮组和一个输入列。

我观察到的奇怪情况是，当我更新 table 第一页上的值时，当我导航到 table 的第 N 页时，我发现一些值发生了变化。当我回到上一页更改值时，我发现它反映在同一个第N页的同一个字段中。这只发生在某些值而不是所有值上，并且更改的值来自 table.

的同一列

欢迎提出任何建议。

<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

您正在使用所有页面通用的索引，因为您的函数 "updateUserInputs(i, 'cr', crit.srInput)" 正在做一些奇怪的事情。我更喜欢直接使用对象而不是使用索引进行更新操作

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

你也必须改变你的商店发货

奇怪的 Angular 绑定问题 - 更新不相关的组件

Wierd Angular Binding Issue - Updating unrelated component

angular

data-binding

2-way-object-databinding