传递数据正确地angularfire2/ionic2
问题描述:
我有我的数据库结构简单:传递数据正确地angularfire2/ionic2
这里的应用程序逻辑:我创建了一些数据与单独删除每个列表项的功能列表。
我正在使用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中的$ key,但不工作.....)...所以我必须使用顶部的这个关键字段来构建我自己的对象。不是一个漂亮的解决方案...你有另一个想法吗?
问题:
如果用户刷卡的项目,看看删除选件,我通过数据与(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(同一页)I'll看到重复我因为之前自己建造对象的名单.....所以我需要一个更优雅的解决方案..
答
发现一个漂亮的解决方案:
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();
}
}
而不是编辑了问题补充解决方案,张贴的答案!回答你自己的问题并不禁止(甚至有一个选项可以直接在“提问”页面回答这个问题) –
哦,好吧! :)我做了,谢谢! – eleinad