Angular 将谷歌图表与firebase中的数据一起使用

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

我的代码可以正确地处理组件中硬写的数据，但我希望将其用于firebase中的数据

以下是有效的方法：

Component.html

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

现在，我想使用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 ) {}
 }

服务台

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

组件技术

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';

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';

console.log（this.data1）

我的代码中有错误吗？（当然）还是有一种更简单的方式来传输数据，比如ngfor循环

---

感谢您的帮助

您遇到了与（）相同的问题

基本上，从映射数据的角度来看是错误的

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

---

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

我需要定义pps和pps列表？谢谢你的帮助如果这真的是一样的，你应该将它标记为一个副本，而不是在这里重新发布你的答案。我是怎么做到的？@andré-kool我没有名声把它标记为duplicated@alNTM不，你不必定义它们。它们是匿名函数的一部分。

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