使用输入绑定基于数据Firestore更改实时绘制图表

Question

我使用doughnut chart实现图表，并希望我的图表根据Firestore数据进行更改（实时）。从另一个使用服务进行连接的组件获取的图表数据，并使用input binding将数据从组件传递到图表组件。我的问题是，当我在Firestore中更改数据时，包含来自服务的数据（例如save,critical,warning）的变量已更改，但图表未更改。这是我的代码：

dashbord.component.ts

// import section
// component declaration 
export class DashboardComponent implements OnInit {
  items: any[];
  save: number =0;
  warning: number =0;
  critical: number =0;  

  constructor(public service: FireService) {}  
  ngOnInit() {      

      this.service.getVehicle().pipe(     
        map(actions => actions.map(a => {               
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;          
          if(data.volume>300){
            this.save++;
          }else if(data.volume<=300&&data.volume>=100){
            this.warning++;
          }else{
            this.critical++;
          }

          return {data};
        }))
      ) 
       .subscribe(res => {      
       this.items = res;       
      })          
    }
 }

dashboard.component.html

..........
    <a href="#pablo">
    <app-charts *ngIf="warning" [save]="save" [warning]="warning" 
[critical] = "critical"></app-charts>
............

chart.component.ts

// import section
@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.scss']
})
export class ChartsComponent implements OnInit {

  @Input() save: number;
  @Input() warning: number;
  @Input() critical: number;


  public doughnutChartLabels: Label[] = ['Safe', 'Warning', 'Critical'];
  public doughnutChartData= [0,0,0];
  public doughnutChartType: ChartType = 'doughnut';
  constructor() { }

  ngOnInit() {
        this.doughnutChartData[0]=this.save; 
        this.doughnutChartData[1]=this.warning; 
        this.doughnutChartData[2]=this.critical;    
      }
    }

有人能解决吗？先谢谢了