时间戳

首页 > 解决方案 > 将 GoogleChart 与来自 firebase 的数据结合使用

angular - 将 GoogleChart 与来自 firebase 的数据结合使用

问题描述

我使用 angular cli 6、rxjs 6、angularfire2 和 firebase。我想在 Angular 6 中使用 GoogleChart API。

我的代码可以与组件中硬写入的数据一起正常工作，但我想将它与来自 firebase 的数据一起使用。

这是有效的：

组件.html

<div>
  <app-gantt [data]="data1" [config]="config1" [elementId]="elementId1"></app-gantt>
</div>

组件.ts

export class PpsComponent implements OnInit {

 patientid: string;
 ppssToDisplay;
 data1: any[];
 config1: GanttChartConfig;
 elementId1: string;

 constructor( 
    private route: ActivatedRoute, 
    private location: Location,
    private ppssService: PPSsService,
    private router: Router, 
    ){ }

 ngOnInit() {
   this.route.params.forEach((urlParameters) => {
   this.patientid = urlParameters['id'];});
   this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid);

   this.data1 = [[ 'treatement','dateA', 'dayeB'],
   [ 'Chirurgie',  new Date(2017, 3, 29), new Date(2017, 3, 30)],
   [ 'Chimiothérapie', new Date(2017, 2, 4),  new Date(2018, 2, 4)],
   [ 'Radiothérapie',   new Date(2017, 2, 4),  new Date(2018, 2, 4)]]; 

    this.config1 = new GanttChartConfig( '',new Date (),new Date ());
    this.elementId1 = 'myGanttChart';

现在，我想将图表与来自 firebase 的数据一起使用。这是我尝试过的：

接口模型

export class PPS
 {
 constructor (
 public Patientid : string,
 public treatement: string,
 public dateA = new Date (),
 public dateB= new Date (),
 public description: string,
 public effetsind: string ) {}
 }

服务.ts

    getPPSByPatientid(Patientid: string) {
      return this.database.list('/ppss', ref =>
      ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
      }

组件.ts

export class PpsComponent implements OnInit {

patientid: string;
ppssToDisplay;
obj: any[];
data1: any[];
config1: GanttChartConfig;
elementId1: string;

constructor( 
  private route: ActivatedRoute, 
  private location: Location,
  private ppssService: PPSsService,
  private router: Router, 
  ){ }

ngOnInit() {

  this.route.params.forEach((urlParameters) => {
  this.patientid = urlParameters['id'];});
  this.ppssToDisplay =this.ppssService.getPPSByPatientid(this.patientid);

  let interestingFields = [ 'treatement','dateA', 'dateB'];
        this.ppssToDisplay.subscribe(obj => {
        this.data1 = [
        interestingFields,
        interestingFields.map(field => obj[field]),
        ];
        console.log(this.data1);
        });

        this.config1 = new GanttChartConfig( '',new Date (),new Date ());
        this.elementId1 = 'myGanttChart';

控制台.log(this.data1);

(2) [Array(3), Array(3)]
0:(3) ["treatement", "dateA", "dateB"]
1:(3) [undefined, undefined, undefined]
length:2
__proto__:Array(0)

我的代码中是否有任何错误？（当然）还是有更简单的方法来传输数据，例如 ngfor 循环？

谢谢您的帮助

标签： angulartypescriptfirebase-realtime-databaseangularfire2

解决方案

您遇到与这些相同的问题（https://stackoverflow.com/a/51186182/8217812）。

基本上，您映射数据的角度是错误的。

this.ppssToDisplay.subscribe(ppsList => {
  this.data1 = [
    interestingFields,
    ...ppsList.map(pps => interestingFields.map(field => pps[field]))
    ];
});

那应该可以解决您的问题。

推荐阅读