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