Angular项目amCharts图表正常刷新但表格无更新 如何实现二者同步刷新

问题原因 #

你的项目基于Angular框架开发，出现表格无法同步刷新的核心原因是：接口返回新数据后，你仅更新了图表绑定的amChartsHistoryData数组，没有同步更新表格绑定的lastprice数组，或是数组更新后没有触发Angular的变更检测机制。

解决步骤 #

1. 同步更新表格绑定数据 #

在图表数据处理方法prepareDataForHistory中，新增表格数据更新逻辑，注意直接替换整个数组而不是原地修改，这样Angular的*ngFor指令可以直接检测到数据变化：

prepareDataForHistory(res) {
  if (res.RETURNCODE == 'OKK00') {
    this.amChartsHistoryData = []
    for (var j = 0; j < res.HISTO.POINT.length; j++) {
      // 原有图表数据处理逻辑保持不变
      if (this.amChartsHistoryDataIntraday) {
        this.amChartsHistoryData.push({
          "date": new Date(res.HISTO.POINT[j].DATE + " " + res.HISTO.POINT[j].TIME),
          "price": res.HISTO.POINT[j].PRICE
        });
      } else {
        this.amChartsHistoryData.push({
          "date": new Date(res.HISTO.POINT[j].DATE.substr(0, 4), res.HISTO.POINT[j].DATE.substr(4, 2), res.HISTO.POINT[j].DATE.substr(6, 2)),
          "price": res.HISTO.POINT[j].PRICE
        });
      }
    }
    this.designPricingAmcharts("chartdivpricing", "", this.amChartsHistoryData);

    // 新增：同步更新表格绑定的lastprice数组，直接替换数组触发变更检测
    // 请根据实际接口返回字段调整映射关系
    this.lastprice = res.HISTO.POINT.map(item => ({
      TIME: item.TIME,
      VOLUMEJOUR: item.VOLUMEJOUR,
      COURS: item.PRICE
    }))
  }
}

2. 手动触发变更检测（可选，适用于更新后仍不刷新的场景） #

如果数据更新后表格还是没有刷新，说明你的数据请求回调运行在Angular的NgZone之外（比如使用了原生AJAX、第三方库回调、脱离Zone的定时器等），可以手动注入NgZone触发变更检测：
首先在组件头部引入并注入NgZone：

import { Component, NgZone } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent {
  constructor(private ngZone: NgZone) {}

  // 其他逻辑...
}

然后把更新lastprice的逻辑包裹在ngZone.run中：

this.ngZone.run(() => {
  this.lastprice = res.HISTO.POINT.map(item => ({
    TIME: item.TIME,
    VOLUMEJOUR: item.VOLUMEJOUR,
    COURS: item.PRICE
  }))
})

3. 优化*ngFor更新逻辑（可选） #

给*ngFor添加trackBy函数，避免不必要的DOM重绘，同时确保数据变化时视图可以正确更新：
修改模板中的表格行代码：

<tr *ngFor="let lp of lastprice; trackBy: trackByLpKey">

在组件中新增trackByLpKey方法：

trackByLpKey(index: number, item: any) {
  // 用数据的唯一标识作为返回值，比如交易时间+价格的组合
  return `${item.TIME}_${item.COURS}`;
}

内容的提问来源于stack exchange，提问作者user16617296