Firebase/AngularFire2:仅在按下保存按钮后才直接推送数据

Question

我有一个带有离子离子列表的配置屏幕,用户可以在列表中添加项目,同时显示列表的当前条目.我希望用户能够通过按钮添加新项目.新项目不应立即保存到firebase - 用户必须按下保存按钮才能执行此操作.目前我的代码看起来像这样

  <ion-list *ngIf="regimeList">
    <ion-list-header color="secondary">Items
      <button class="my-select" ion-button outline item-end (click)="addItem()">+</button>
    </ion-list-header>
      <ion-item *ngFor="let item of itemList">
        {{item.name}}
      </ion-item>
  </ion-list>

itemList的数据来自一个带有一点映射/格式化的observable:

this.$ref = this.database.list('/items/' + uid);
this.$ref.subscribe(snapshot => { this.map2itemList(snapshot) });

当用户点击离子按钮时,他会弹出一个可以输入新项目的弹出窗口.按"确定",新条目应显示在列表中,但不保存到firebase.所以我不能使用

this.$ref.push(myNewItem);

由于可观察,数据将直接提交并更新我的视图.分离这两个行动的好策略是什么？先感谢您.

Answer 1

这是一个可以帮助你的课程。它有点难看并且没有经过测试，但它应该可以工作。

import { Observable } from 'rxjs';

class ObservableFirebaseListWithTempStorage {
    private observer;
    private tempItems: Array<any>;
    private dbItems: Array<any>;
    public items: Observable<Array<any>>;

    constructor(private $ref, private mapFunction) {
        this.items = Observable.create(observer => {
            this.observer = observer;
        });
        $ref.subscribe(snapshot => {
            this.dbItems = this.mapFunction(snapshot);
            this.updateItems();
        });
    }
    private updateItems(){
        let tempList = [];
        tempList.push(this.dbItems);
        tempList.push(this.tempItems);
        this.observer.next(tempList)
    }
    public addItem(item): void {
        this.tempItems.push(item);
        this.updateItems();
    }
    public saveItems():void{
        this.tempItems.forEach(item=>{
            this.$ref.push(item);      
        });
    };
}

您应该稍微更改一下 map2itemList() ，以便它将快照作为参数并返回映射的项目，而不是设置某些内容。

现在您可以创建该类的实例：

let items = new ObservableFirebaseListWithTempStorage(this.$ref, this.map2itemList);
this.itemList = items.items;

添加一个项目：

this.items.addItem(yourNewTempItem);

并将项目保存到数据库：

this.items.saveItems();