График в реальном времени на основе изменений в хранилище данных с использованием привязки ввода - PullRequest
Новая
       23

График в реальном времени на основе изменений в хранилище данных с использованием привязки ввода

0 голосов
/ 20 мая 2019

Я использую диаграмму, используя doughnut chart, и хочу, чтобы моя диаграмма изменялась в зависимости от данных пожарного депо (в реальном времени).Данные для диаграммы получены из другого компонента, который подключается с помощью сервиса и использует 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;    
      }
    }

Кто-нибудь может решить это?Спасибо, прежде чем

...