постоянно обновлять данные в таблицах материалов angular из API

Question

У меня есть приложение angular, в котором я создал таблицу с использованием материала angular и заполнил данные с помощью 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

Вам нужно очистить старые данные от 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();
  }

Answer 2

Если вы хотите просто заменить данные, сделайте

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