Question

我有一个组件，其中显示了一些图表和旁边的表格，显示了每个图表的最新值。

我为数组中的每个对象执行此操作，如下所示：

<div class="patient-box level-2" *ngFor="let bed of patientService.bedsLevel2" draggable="true" (dragstart)="onDrag($event, bed)">
...
<table class="vsTable">
    <tr>
      <th [matTooltip]="translations?.Tooltip.Type">Type</th>
      <th [matTooltip]="translations?.Tooltip.AverageReading1624">16-24t</th>
      <th [matTooltip]="translations?.Tooltip.Chart" translate>Chart</th>
      <th [matTooltip]="translations?.Tooltip.AverageReading01">0-1t</th>
    </tr>
    <tr *ngFor="let vitalSign of vitalSigns; let i = index">
      <td [matTooltip]="getTooltip(vitalSign)">{{vitalSign}}</td>
      <td>{{getVitalSign(bed.timeWindows[5], vitalSign)}}</td>
      <td>
        <chart [options]="lineChartOptions" (load)="saveLineChart($event.context, vitalSign, bed)" draggable="true"></chart>
      </td>
      <td>{{getVitalSign(bed.timeWindows[0], vitalSign)}}</td>
    </tr>
  </table>

我时不时地拨打服务器来更新patientService.bedsLevel2数组：

updateBeds() {
this.patientService.bedsLevel2.forEach(bed => {
  this.patientService.getBedDetails(bed.cetreaName).subscribe(
    (result: BedDetails) => {
      this.updateChartData(result);
      bed = result;
    },
    err => {
      console.log(err);
    }
  );
});
this.updateBedsTimeout = setTimeout(() => this.updateBeds(), BED_UPDATE_INTERVAL);

}

正如您在代码中看到的那样，我使用结果更新图表数据，然后将其作为新值分配给bed对象。此方法完成后，图表视图已更新，但其旁边的表中的数据未更新。

我已经读过Angular没有检测到更改，除非对数组的引用发生更改，因此我尝试在updateBeds()方法的末尾添加以下各项：

this.patientService.bedsLevel2 = [...this.patientService.bedsLevel2];
this.patientService.bedsLevel2 = this.patientService.bedsLevel2.slice();

他们都没有解决问题。可能导致这个问题的原因，为什么我的修复工作没有成功，以及解决这个问题的原因是什么？我已经阅读了有关使用ChangeDetectorRef手动进行更改检测的内容，因此我可能会尝试一下。

Answer 1

您错误地更改了本地bed变量的值。请查看下面的代码并运行以查看只是将本地引用更改为指向新对象将不会实际更改数组中的值。如果要更改整个对象引用（如下所示），则必须通过索引更改原始数组中的引用。

＆＃13;

let beds = [
  { cetreaName: 'Bed #1' },
  { cetreaName: 'Bed #2' },
  { cetreaName: 'Bed #3' }
];

console.log('before', JSON.stringify(beds));

beds.forEach(bed => {
  bed = { cetreaName: 'Updated ' + bed.cetreaName };
});

console.log('after (not updating)', JSON.stringify(beds));

beds.forEach((bed, index) => {
  beds[index] = { cetreaName: 'Updated ' + bed.cetreaName };
});

console.log('after (updating)', JSON.stringify(beds));

＆＃13;

Angular不更新视图的一部分

1 个答案: