데이터 전달이 제대로 angularfire2/ionic2

Question

와 내 데이터베이스에 간단한 구조를 가지고 :

여기에 응용 프로그램 로직 : I 별도로 각 목록 항목을 삭제 할 수있는 기능 일부 데이터 목록을 만들 수 있습니다.

데이터베이스 통신을 위해 angularefire2 플러그인을 사용하고 있습니다. 데이터를 얻을 수있는 코드는 구성 요소에서 다음과 같습니다 : 내 보기에서

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

코드 :

<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 사용자가 항목을 삭제할 수 있다는 것을 내가 원하는. 이를 위해 핵심 참조 (firebase의 $ 키, 작동하지 않음 .....)에 대한 액세스가 필요합니다 ... 그래서 맨 위에이 키 필드가있는 객체를 직접 만들어야했습니다. 예쁜 해결책이 아닌 ... 다른 아이디어가 있습니까?

문제 :

사용자가 삭제-옵션을 참조하는 항목을 슬쩍 경우에, 나는 (ionDrag)로 데이터를 전달 = "onSelectedVisit (방문)이 함수의 구성 요소에 내 코드 :.

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

나는 .. VisitsPage (같은 페이지) 할께 그래서 난 더 우아한 솔루션이 필요합니다 ..... 때문에 전에 자신의 사례 개체의 내 목록에서 중복을 참조로 다시 이동하지 않으면

Answer 1

발견 된 꽤 솔루션 :

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

참조 : Github - Angularfire2 Docs