Passing Daten korrekt mit angularfire2/ionic2

Question

Ich habe eine einfache Struktur in meiner Datenbank:

Die App Logik hier: Ich erstelle eine Liste mit einigen Daten mit der Funktion separat einen Listeneintrag zu löschen.

Ich benutze das Angularefire2 Plugin für Datenbankkommunikation. Die Codedaten zu erhalten wie folgt aussieht in Komponente:

// Set variables 
currentUserID: any; 
visits: any[] = []; 
selectedVisit: any; 

constructor(public navCtrl: NavController, public navParams: NavParams, private dbAction: DbActionsProvider, private afDatabase: AngularFireDatabase) { 
    // Build Current User ID 
    this.currentUserID = this.dbAction.currentUserID().subscribe(data => { 
     this.currentUserID = data.uid; 
    }); 
    } 

ngOnInit() { 
    // Get data 
    this.afDatabase.object('data/users/' + this.currentUserID + '/visits') 
     .snapshotChanges().map(action => { 
     const data = action.payload.toJSON(); 
     return data; 
     }) 
     .subscribe(result => { 
     Object.keys(result).map(key => { 
      this.visits.push({ 'key': key, 'data':result[key] 
      }); 
     }); console.log(this.visits) 
    }) 
    } 

Der Code in meiner Ansicht:

<ion-item-sliding *ngFor="let visit of visits | orderBy:'date' : false" (ionDrag)="onSelectedVisit(visit)"> 
    <ion-item> 
    <ion-icon ios="ios-man" md="md-man" item-start></ion-icon> 
    <strong>{{ !visit.data.name == '' ? visit.data.name : 'Unbekannt' }}</strong> 
    <p>Musterstraße 8, 66130 Saarbrücken</p> 
    </ion-item> 
    <ion-item-options side="right"> 
    <button ion-button>Bearbeiten</button> 
    <button ion-button color="danger" (click)="deleteVisit()">Löschen</button> 
    </ion-item-options> 
    <ion-input [(ngModel)]="visit.id"></ion-input> 
</ion-item-sliding> 

Ok..now Ich möchte, dass der Benutzer Elemente löschen. Dazu brauche ich Zugriff auf die Schlüsselreferenz ($ key in Firebase, aber funktioniert nicht .....) ... also musste ich mein eigenes Objekt mit diesem Schlüsselfeld oben erstellen. Keine schöne Lösung ... hast du noch eine Idee?

Das Problem:

Wenn der Benutzer ein Element bewegen, um die Delete-Option, um zu sehen, gebe ich Daten mit (ionDrag) = "onSelectedVisit (Besichtigung) Mein Code in der Komponente für diese Funktion.

onSelectedVisit(visit) { 
    this.selectedVisit = visit.key; 
    console.log(this.selectedVisit); 
} 

deleteVisit() { 
    this.afDatabase.list('data/users/' + this.currentUserID + '/visits').remove(this.selectedVisit); 
    this.navCtrl.setRoot(VisitsPage); 
} 

Wenn ich zurück navigieren nicht VisitsPage (gleiche Seite) ich werde vor wegen der eigenen builded Objekt in meiner Liste Duplikate sehen ..... so brauche ich eine elegantere Lösung ..

Answer 1

Gefunden eine hübsche Lösung:

export class AppComponent { 
    itemsRef: AngularFireList<any>; 
    items: Observable<any[]>; 
    constructor(db: AngularFireDatabase) { 
    this.itemsRef = db.list('messages'); 
    // Use snapshotChanges().map() to store the key 
    this.items = this.itemsRef.snapshotChanges().map(changes => { 
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val() })); 
    }); 
    } 
    addItem(newName: string) { 
    this.itemsRef.push({ text: newName }); 
    } 
    updateItem(key: string, newText: string) { 
    this.itemsRef.update(key, { text: newText }); 
    } 
    deleteItem(key: string) {  
    this.itemsRef.remove(key); 
    } 
    deleteEverything() { 
    this.itemsRef.remove(); 
    } 
} 

Referenz: Github - Angularfire2 Docs