Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/neo4j/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 角度不更新视图的一部分_Angular - Fatal编程技术网

Angular 角度不更新视图的一部分

Angular 角度不更新视图的一部分,angular,Angular,我有一个组件,其中显示了一些图表,旁边有一个表,显示了每个图表的最新值 我对数组中的每个对象执行此操作,如下所示: <div class="patient-box level-2" *ngFor="let bed of patientService.bedsLevel2" draggable="true" (dragstart)="onDrag($event, bed)"> ... <table class="vsTable"> <tr>

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

我对数组中的每个对象执行此操作,如下所示:

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

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

我读到Angular不会检测到更改,除非对数组的引用发生更改,因此我尝试将以下各项添加到
updateBeds()
方法的末尾:

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

但他们都没有解决这个问题。是什么导致了这个问题,为什么我的尝试无法解决它,什么可以解决它?我读过一些关于使用ChangeDetectorRef手动进行更改检测的内容,因此我可能会尝试一下。

您错误地更改了本地
bed
变量的值。请查看下面的代码并运行以查看仅更改本地引用以指向新对象实际上不会更改数组中的值。如果希望更改整个对象引用(如下所示),则必须按索引更改原始数组中的引用

let beds=[
{CetreName:'床#1'},
{CetreName:'床#2'},
{CetreName:'床#3'}
];
log('before',JSON.stringify(beds));
床。forEach(床=>{
bed={cetreaName:'更新'+bed.cetreaName};
});
log('after(not updated'),JSON.stringify(beds));
床位。forEach((床位,索引)=>{
beds[索引]={cetreName:'更新'+bed.cetreName};
});

log('after(update'),JSON.stringify(beds))您不是只是更改局部变量的值而不是数组中的值吗
bed=result
只是将
bed
局部变量的指针更改为指向新结果。这并没有改变数组中的引用。@DanielWStrimpel我正在对数组进行
forEach
,其中
bed
表示每个对象。是的,但是
bed
是指向内存中对象的变量。当您为该变量重新赋值时,您只需更改该局部变量所指向的内容。。。这对数组中的值没有影响。我明白了,谢谢。我认为
forEach
会给我一个数组中实际对象的引用,并使我能够为它们分配新的值。如果我将得到的所有结果添加到一个新数组中,然后在最后写入PatientServe.bedsLevel2
=包含来自服务器调用的对象的新数组,会怎么样?forEach会提供对实际对象的引用。如果更改该对象上的属性,则可以在使用该对象的任何位置看到该属性。但是,更改变量指向的对象不会对其指向的原始对象产生任何影响。但是,是的,解决问题的最好方法可能是批量处理您的请求,并将您的数组设置为新数组,以确保Angular在模板中重新处理它。RxJS有一些方法可以等待,直到一组可观察对象完成为止(例如,
Observable.forkJoin
)。
this.patientService.bedsLevel2 = [...this.patientService.bedsLevel2];
this.patientService.bedsLevel2 = this.patientService.bedsLevel2.slice();