传递数据正确地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看到重复我因为之前自己建造对象的名单.....所以我需要一个更优雅的解决方案..

来源

2017-10-19 eleinad

而不是编辑了问题补充解决方案，张贴的答案！回答你自己的问题并不禁止（甚至有一个选项可以直接在“提问”页面回答这个问题） –

哦，好吧！ :)我做了，谢谢！ – eleinad

发现一个漂亮的解决方案：

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

来源

2017-10-20 13:53:45 eleinad

传递数据正确地angularfire2/ionic2

回答

相关问题