如何从AngularFire2 Service

Question

我正在尝试从清单中的产品编号列表中获取最高数字。我可以很好地查询列表，但令我困惑的是使用firebase的异步性质，让我对事情发生的原因感到困惑。

我在一个注入add item组件的服务中查询我的数据库，在那里我想检索最后一个项目编号并为下一个项目添加1。这是我的组件代码，我所述组件的模板，以及发送数据的服务：

添加项目组件

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

}

看着我的console.logs让我更加困惑。我知道异步操作需要时间，但我认为通过订阅数据，我得到一个承诺，它将被解决？ console.logs按此顺序打印：

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

我为什么发生这种情况（我必须等待服务器发送数据，以下代码执行得太快）但我不知道的是如何修复这个。在分配值之前，如何告诉angular等待值解析？