我有一个表单，可以将数据添加到Firestore，并从Firestore渲染到Chart.js（line）。但是它不会自动更新图表。如何使用firestore集合中的新数据刷新图表？我试着使用this.chart.update();，但不工作。
此代码生成图表

createChart() {    
   this.aaService.getData(this.id).subscribe(
      (aaServ)  => {
        this.data = aaServ;           
      })
    const abc = this.data.map((item) => item.abc); 
    const xyz = this.data.map((item) => item.xyz); 
    this.chart = new Chart('MyChart', {
      type: 'line',
      data: {
        labels: abc,
        datasets: [
          {
            label: 'xyz',
            data: xyzLabels,
            backgroundColor: 'red',
          },
        ],
      },
      options: {
        aspectRatio: 2.5,
      },
    });
  }

从firestore获取数据

getData(id:string){
  return this.db 
  .collection('aaCollection')
  .snapshotChanges()
  .pipe(map(docArray => {
    return docArray.map(doc => {
      return {
        abc: doc.payload.doc.data()['abc'],
        xyz: doc.payload.doc.data()['xyz']
      }
      
    }) 
  }
  ))
 }
}

在组件中，当表单被提交存储在Firestore中，并假设显示在图表上。

onSubmit(){
    this.id = this.activatedRoute.snapshot.params["id"]; 
    let aa: aaModel = {
      ID: this.id, 
      xyz: this.testForm.value.xyz,
      abc: this.testForm.value.abc,     
    } 
    this.aaService.addBodyMetrics(this.Id, aa);
  }

在服务中添加数据

addBodyMetrics( id:string, test:testModel){
  this.db.collection('aaCollection')
  .add(test)
  .then(res => {
    console.log('added Successfully');
  })   
  .catch((error) => {
    console.log('Error  ' ,error);
  });
  
}