Firebase/AngularFire2: पुश डेटा नहीं सीधे, केवल बचाने के बटन

Question

मैं एक आयोनिक आयन सूची है, जहां उपयोगकर्ता और भी मौजूदा प्रविष्टियों सूची में आइटम जोड़ सकते हैं के साथ एक विन्यास स्क्रीन मिल गया है दबाने के बाद सूची में दिखाया जा रहा है। मैं चाहता हूं कि उपयोगकर्ता बटन के माध्यम से नए आइटम जोड़ सकें। नई वस्तुओं को तुरंत फायरबेस में सहेजा नहीं जाना चाहिए - उपयोगकर्ता को ऐसा करने के लिए एक सेव बटन दबा देना है। वर्तमान में मेरे कोड लगता है कि यह

<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 के लिए डेटा एक छोटे से मानचित्रण/formating के साथ एक नमूदार से है:

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

जब उपयोगकर्ता आयन बटन क्लिक करता है, वह एक पॉपअप प्राप्त करता है जहां वह एक नया आइटम दर्ज कर सकता है। "ठीक" दबाकर, नई प्रविष्टि सूची में दिखानी चाहिए, लेकिन फायरबेस में सहेजी नहीं जा सकती है। तो मैं नहीं कर सकते क्योंकि नमूदार डेटा सीधे प्रतिबद्ध किया जाएगा और मेरे विचार अद्यतन का उपयोग

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