从 api 持续更新 angular material 表中的数据

Question

我有一个 angular 应用程序，我在其中使用 angular material 创建了一个 table 并使用 API 填充数据。我的代码


  ngOnInit() {
    this.getChillerApiData();
  }

  getChillerApiData() {
    this.api.getFirstChillerData()
      .subscribe((first_data:any) => {
        this.first_api_data = first_data;
        this.putPrimaryPumpData();
      });
  }

  displayedColumns_primary_pump: string[] = ['Index', 'Pump', 'Frequecy', 'Mode'];
  dataSource_primary_pump = new MatTableDataSource<PrimaryPumpDataTable>()

  primary_pump_index = 1
  @ViewChild('table', { static: true }) primary_pump_table
  putPrimaryPumpData(){
    this.dataSource_primary_pump.data.push(
      {Index: this.primary_pump_index++, Pump: "P-1", Frequecy: String(this.first_api_data["Pr. Chw Pump 1 VFD F/B"]), Mode: String(this.first_api_data["Pr. Chw Pump 1 A/M status"])},
      {Index: this.primary_pump_index++, Pump: "Delta T", Frequecy: String(this.first_api_data["Chiller 1 evap Supply temp"] - this.first_api_data["Chiller 1  evap ret Temp"]).slice(0,4), Mode: ""},)
      this.primary_pump_table.renderRows();
  }

}

我正在尝试获取 ngOnIt 中的数据并将其显示在 table 中。我希望通过每 1 分钟调用 API 来每 1 分钟更新一次此数据。为此，我添加了一个函数，如

intervalId : any

  getRealTimeData() {
    this.getChillerApiData()
    clearInterval(this.intervalId);
    this.intervalId = setInterval(() => {
      this.getChillerApiData();
    }, 1000);
  }

并在 ngOnIt 中调用此函数。现在我能够获取最新数据，但我的 table 中的行被附加了新数据。我想用 API 中的最新值更新 table 中的行，而不是添加新行。

有人可以帮我解决这个问题吗？

Answer 1

如果你想简单的替换数据做

putPrimaryPumpData(){
    this.dataSource_primary_pump.data = [
      {Index: this.primary_pump_index++, Pump: "P-1", Frequecy: String(this.first_api_data["Pr. Chw Pump 1 VFD F/B"]), Mode: String(this.first_api_data["Pr. Chw Pump 1 A/M status"])},
      {Index: this.primary_pump_index++, Pump: "Delta T", Frequecy: String(this.first_api_data["Chiller 1 evap Supply temp"] - this.first_api_data["Chiller 1  evap ret Temp"]).slice(0,4), Mode: ""}
    ]
      this.primary_pump_table.renderRows();
  }

Answer 2

在推送更新数据之前，您需要清空 this.dataSource_primary_pump.data 中的旧数据。

putPrimaryPumpData(){
    this.dataSource_primary_pump.data = []; // empty data.
    this.dataSource_primary_pump.data.push(
      {Index: this.primary_pump_index++, Pump: "P-1", Frequecy: String(this.first_api_data["Pr. Chw Pump 1 VFD F/B"]), Mode: String(this.first_api_data["Pr. Chw Pump 1 A/M status"])},
      {Index: this.primary_pump_index++, Pump: "Delta T", Frequecy: String(this.first_api_data["Chiller 1 evap Supply temp"] - this.first_api_data["Chiller 1  evap ret Temp"]).slice(0,4), Mode: ""},)
      this.primary_pump_table.renderRows();
  }

从 api 持续更新 angular material 表中的数据

continuously update the data in the angular material tables from an api

angular-material

angular

mat-table