Angular material 自动更新Mat表

我一直在尝试实现一个解决方案，使用在web上找到的线程自动更新我的表，但没有成功。我对表单和表使用单独的组件，数据来自从API获取数据的服务。删除按钮是从列表组件内部运行的唯一操作，因此我认为我们可以从那里开始

服务内容如下：

postRecordDetail() {
    const httpOptions = {
      headers: new HttpHeaders({'Content-Type': 'application/json'})
    }
    return this.http.post(this.rootURL+'/records', this.formData, httpOptions)
  }

  putRecordDetail() {
    return this.http.put(
      this.rootURL+'/records/' + this.formData.id, 
      this.formData)
  }

  deleteRecordDetail(id) {
    return this.http.delete(
      this.rootURL+'/records/' + id, 
  )
  }

  public getList() {
    return this.http.get(this.rootURL+'/records');
  }

以下是列表组件：

export class ListComponent implements OnInit {
  ELEMENT_DATA: Record[] = []
  displayedColumns = ['id', 'date', 'name', 'value', 'category', 'type', 'button']
  dataSource = new MatTableDataSource<Record>(this.ELEMENT_DATA);

  constructor(public service: BudgetService) { }

  ngOnInit(){
    this.getAllReports();
  }

  populateForm(rd: Record) {
    this.service.formData = Object.assign({}, rd)
  }

  public getAllReports() {
    let resp = this.service.getList();
    resp.subscribe(records => this.dataSource.data = records as Record[]);
  }

  onDelete(id) {
    if(confirm('Are you sure?')){
      this.service.deleteRecordDetail(id)
      .subscribe(
        res => {   },
        err => {
          console.log(err);
        })
    }    
  }
}

导出类ListComponent实现OnInit{
元素_数据：记录[]=[]
displayedColumns=['id'，'date'，'name'，'value'，'category'，'type'，'button']
dataSource=新MatTableDataSource（this.ELEMENT_DATA）；
建造商（公共服务：预算服务）{}
恩戈尼尼特（）{
这个.getAllReports（）；
}
populateForm（rd:记录）{
this.service.formData=Object.assign（{}，rd）
}
公共getAllReports（）{
让resp=this.service.getList（）；
resp.subscribe（records=>this.dataSource.data=记录作为记录[]）；
}
onDelete（id）{
如果（确认（'你确定吗？'））{
this.service.deleteRecordDetail（id）
.订阅(
res=>{}，
错误=>{
控制台日志（err）；
})
}    
}
}