Question

我有一个使用Firebase的Angular服务。该服务由多个组件使用。当一个组件使用该服务时（dashboard.component.ts在onSubmit（）中使用它），它会获取数据并将其推送到Firebase。当另一个组件使用它时（student-ordered-escorts.component.ts也在onSubmit中使用它），在newEscort（）中使用时，下面代码中的escortList变量未实例化，未定义。

服务代码

import { Injectable, } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Escort } from '../model/escort.model';

@Injectable()
export class EscortService {

  escortList : AngularFireList<any>;
  selectedEscort : Escort = new Escort();

  constructor(private firebase : AngularFireDatabase) { }

  getData(){
    this.escortList = this.firebase.list('something');
    return this.escortList;
  }

  newEscort(escort : Escort){

    if(escort.driver == 'No driver yet' || escort.driver == null)
        escort.status = "Unassigned";
    else
        escort.status = "Assigned";


      if(this.escortList == null)
        console.log("escortList was null");

        this.escortList.push({
            driver : escort.driver,
            pickup : escort.pickup,
            dropoff : escort.dropoff,
            passengers : escort.passengers,
            no_show : false,
            status : escort.status,
            created : Date.now(),
            finished : null
        });
    }

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';
import { EscortService } from '../services/escort.service';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
declare var $:any;
declare var google: any;

@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html',
    providers: [EscortService]
})

export class DashboardComponent implements OnInit{

    constructor(private escortService : EscortService, private firebase : AngularFireDatabase) { }

onSubmit(escortForm: NgForm){
       if(escortForm.value.$key == null)
           this.escortService.newEscort(escortForm.value);
       else
           this.escortService.updateEscort(escortForm.value.$key, escortForm.value);
           this.resetForm(escortForm);
    }
}

学生有序escort.component.ts

import { Component, OnInit } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';
import { EscortService } from '../../services/escort.service';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Component({
  selector: 'app-student-ordered-escort',
  templateUrl: './student-ordered-escort.component.html',
  styleUrls: ['./student-ordered-escort.component.scss'],
  providers: [EscortService]
})
export class StudentOrderedEscortComponent implements OnInit {

  constructor(private escortService : EscortService, private firebase : AngularFireDatabase) { }

  ngOnInit() {
  }

onSubmit(escortForm: NgForm){
        this.escortService.newEscort(escortForm.value);
    }
}

Answer 1

您在2个组件中提供EscortService，这将创建2个服务实例，每个组件使用差异实例。所以将EscortService移动到AppModule

dashboard.component.ts

@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html',
    providers: [EscortService] // Delete this
})

学生有序escort.component.ts

@Component({
  selector: 'app-student-ordered-escort',
  templateUrl: './student-ordered-escort.component.html',
  styleUrls: ['./student-ordered-escort.component.scss'],
  providers: [EscortService] //Delete this
})

app.module.ts

@NgModule({
  ...
  providers: [EscortService],
  ...
})

因为当你尝试推送时你的escortList未定义。更改您的服务：

newEscort(escort: Escort) {

    if (escort.driver == 'No driver yet' || escort.driver == null)
      escort.status = "Unassigned";
    else
      escort.status = "Assigned";


    if (!this.escortList) {
      this.escortList = this.getData();
    }

    this.escortList.push({
      driver: escort.driver,
      pickup: escort.pickup,
      dropoff: escort.dropoff,
      passengers: escort.passengers,
      no_show: false,
      status: escort.status,
      created: Date.now(),
      finished: null
    });
  }

对于不同的组件，Angular Firebase服务属性实例化/为null

1 个答案: