角度不更新视图的一部分

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 变量的值。请查看下面的代码并运行以查看仅将本地引用更改为指向新对象实际上不会更改数组中的值。如果要更改整个对象引用，则必须按索引更改原始数组中的引用（如下所示）。

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