Question

我使用angular cli 6，rxjs 6，angularfire2和firebase。我想在角度6中使用GoogleChart API。

我的代码可以正确地用组件中用硬文字编写的数据，但是我想将其与firebase中的数据一起使用。

这是有效的方法：

Component.html

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

Component.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的数据一起使用。这是我尝试过的：

Interface.model

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

Service.ts

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

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

console.log（this.data1）;

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

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

谢谢您的帮助

Answer 1

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

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

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

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

将GoogleChart与Firebase中的数据一起使用

1 个答案: