使用angularfire2 / ionic2正确传递数据

Question

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

这里的app逻辑：我创建了一个包含一些数据的列表，其功能是分别删除每个列表项。

我正在使用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>

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

问题：

如果用户滑动项目以查看Delete-Option，我会使用（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