使用 angularfire2 / ionic2 正确传递数据

Question

我的数据库中有一个简单的结构：

此处的应用程序逻辑：我创建了一个包含一些数据的列表，并具有分别删除每个列表项的功能。

我正在使用 angularefire2 插件进行数据库通信。在 component:

中获取数据的代码如下所示

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

好的..现在我希望用户可以删除项目。为此，我需要访问关键引用（firebase 中的 $key，但不起作用......）...所以我必须在顶部使用这个关键字段构建我自己的对象。不是一个很好的解决方案...您有其他想法吗？

问题：

如果用户滑动项目以查看删除选项，我将使用 (ionDrag)="onSelectedVisit(visit)" 传递数据。我在组件中用于此功能的代码：

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

使用 angularfire2 / ionic2 正确传递数据

Passing data correctly with angularfire2 / ionic2

firebase

firebase-realtime-database

ionic2

angularfire2

ionic3