如何将数据从AngularFire2服务传递到Angular2组件

如何将数据从AngularFire2服务传递到Angular2组件,angular,electron,angularfire2,Angular,Electron,Angularfire2,我试图从库存中的产品编号列表中获取最高编号。我可以很好地查询列表,但让我困惑的是使用firebase的异步特性,它让我弄不清楚为什么事情会以这种方式发生 我正在一个注入additem组件的服务中查询我的数据库,我想在其中检索最后一个项目编号,并为下一个项目向其中添加1。这是我的组件代码、我的组件模板以及发送数据的服务: 添加项目组件 添加项目模板 我知道为什么会发生这种情况(我必须等待服务器发送数据,并且下面的代码执行得太快),但我不知道如何解决这个问题。如何告诉angular在赋值之前等待值解

我试图从库存中的产品编号列表中获取最高编号。我可以很好地查询列表,但让我困惑的是使用firebase的异步特性,它让我弄不清楚为什么事情会以这种方式发生

我正在一个注入additem组件的服务中查询我的数据库,我想在其中检索最后一个项目编号,并为下一个项目向其中添加1。这是我的组件代码、我的组件模板以及发送数据的服务:

添加项目组件 添加项目模板 我知道为什么会发生这种情况(我必须等待服务器发送数据,并且下面的代码执行得太快),但我不知道如何解决这个问题。如何告诉angular在赋值之前等待值解析

import { Component, OnInit } from '@angular/core';
import {MdButtonModule} from '@angular/material';
import { Item } from './Item'
import {InventoryDataService} from '../../inventory-data.service';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
  selector: 'app-additem',
  templateUrl: './additem.component.html',
  styleUrls: ['./additem.component.scss']
})

export class AdditemComponent implements OnInit {
  public item: Item;
  itemsList: any;
  nextItemNumber: number;

  constructor(private itemData: InventoryDataService) {
    this.itemsList = itemData.getItems();
    this.item = {
      num: null,
      name: '',
      class: '',
      category: '',
      price: null,
      description: ''
    }
       this.getNextItemNumber()
   }

  ngOnInit() {
  }

  addItem() {
    this.itemData.addItem(this.item);
    console.log('added!');
  }

  getNextItemNumber() {
    this.item.num = this.itemData.number;
    console.log('Component Says The Number Is: ' + this.item.num);
  }

  get diagnostic() { return JSON.stringify(this.item); }
}
<form>
  <md-form-field class="example-full-width">
    <input mdInput placeholder="Product Number" name="itemNumber" value="item.num" [(ngModel)]="item.num">
  </md-form-field>

  <p>
    <md-form-field class="example-full-width">
      <input mdInput placeholder="Item Name" name="itemName" [(ngModel)]="item.name">
    </md-form-field>
    <md-form-field class="example-full-width">
      <input mdInput placeholder="Item Description" name="itemDescription" [(ngModel)]="item.description">
    </md-form-field>
    <md-form-field class="example-full-width">
        <input mdInput placeholder="Item Description" type="number" name="itemPrice" [(ngModel)]="item.price">
      </md-form-field>
  </p>

<md-form-field class="example-full-width">
      <input mdInput placeholder="Class" name="itemClass" [(ngModel)]="item.class">
</md-form-field>
<md-form-field class="example-full-width">
      <input mdInput placeholder="Category" name="itemCategory" [(ngModel)]="item.category">
    </md-form-field>
</form>

<div id='submit'>
  <button md-button type="submit" (click)="addItem()">Add!</button>
  <button md-button type="button" (click)="getNextItemNumber()">See Item Numbers</button>
</div>
<p>
    {{diagnostic}}
</p>
import { Injectable } from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';

@Injectable()
export class InventoryDataService {
  items: FirebaseListObservable<any[]>;
  itemNumbers: FirebaseListObservable<any[]>;
  itemsObservable: DataSource<any>;
  number: any;


  constructor(db: AngularFireDatabase) {
    this.items = db.list('/items');
    this.itemNumbers = db.list('/items',  { preserveSnapshot: true,
      query: {
        orderByChild: 'number',
        limitToLast: 1,
      }
    });
    console.log('Data Service Constructed!');

    this.itemNumbers.subscribe(snapshots => {
      snapshots.forEach(snapshot => {
        this.number = snapshot.val().number;
        console.log('Number has been generated! Number Is: ' + this.number +  ' Snapshot Says: ' + snapshot.val().number);
      })
    })
   }

   getItems() {
     return this.items;
   }

   addItem(item: object) {
     this.items.push(item);
     console.log('Item Pushed: ' + item);
   }

}
Data Service Constructed!
Component says the number is undefined
Number Has been Generated!