从api连续更新角度材质表中的数据

Question

我有一个角度应用程序，在其中我使用角度材料创建了一个表格，并使用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中的数据并将其显示在表中。我希望通过每1分钟进行一次API调用来每1分钟更新一次此数据。为此，我添加了一个功能，例如

intervalId : any

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

并在ngOnIt中调用此函数。现在，我可以获取最新数据，但是表中的行将附加新数据。我想用API中的最新值更新表中的行，而不是添加新行。

有人可以帮我吗？

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