Свойства службы Angular Firebase для различных компонентов / пустые

Question

У меня есть служба Angular, которая использует Firebase.Служба используется более чем одним компонентом.Когда один компонент использует сервис (dashboard.component.ts использует его в onSubmit ()), он берет данные и отправляет их в Firebase.Когда другой компонент использует его (student-order-escorts.component.ts также использует его в onSubmit), переменная escortList в приведенном ниже коде не создается, не определяется при использовании в newEscort ().

Сервисный код

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);
    }
}

student-order-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

Вы предоставляете EscortService в 2 компонентах, которые создают 2 экземпляра службы, каждый компонент использует экземпляр разности.Так что переместите ваш EscortService в AppModule

dashboard.component.ts

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

student-orders-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
    });
  }