如何在angularfire2 v5中使用firestore检索生成的文档ID答案

【问题标题】：How to retrieve a generated document id with firestore in angularfire2 v5如何在angularfire2 v5中使用firestore检索生成的文档ID
【发布时间】：2018-02-22 14:57:29
【问题描述】：

我已经安装了这些软件包：

@ionic/cli-utils      : 1.19.1
ionic (Ionic CLI)     : 3.19.1
cordova (Cordova CLI) : 8.0.0 
Ionic Framework       : ionic-angular 3.9.2
Node                  : v6.11.1
npm                   : 5.6.0 
angularfire2          : 5.0.0-rc.6

我正在学习Mobile App Development with Ionic，Revised一书中的教程。但是安装 angularfire2，安装了弃用实时数据库的版本，建议使用 Firestore。所以我想尝试一下，但我似乎可以选择一个文档。

我的tasklist.html（照书还是）：

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Tasks
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-left (click)="addItem()">
        <ion-icon name="add"></ion-icon>Add Item
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding #slidingItem *ngFor="let task of tasks | async">
      <ion-item [ngClass]="{taskDone: task.status == 'done'}">{{task.title}}</ion-item>
      <ion-item-options side="right" (ionSwipe)="removeTask(slidingItem, task)">
        <button ion-button icon-only (click)="markAsDone(slidingItem,task)" color="secondary">
          <ion-icon name="checkmark"></ion-icon>
        </button>
        <button ion-button icon-only expandable (click)="removeTask(slidingItem,task)" color="danger">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

我的 tastlist.ts（addItem() 函数更改成功，但更新和删除不起作用，因为我似乎无法从所选任务中获取 $key）：

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Component } from '@angular/core';
import { NavController, ItemSliding } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

import { Task } from './task';

@Component({
  selector: 'page-tasklist',
  templateUrl: 'tasklist.html'
})
export class TaskListPage {
  private tasksCollection: AngularFirestoreCollection<Task>;
  tasks: Observable<Task[]>;

  constructor(public navCtrl: NavController, public afs: AngularFirestore) {
    this.tasksCollection = afs.collection<Task>('tasks');
    this.tasks = this.tasksCollection.valueChanges();
  }

  addItem() {
    let theNewTask: string = prompt("New Task");
    if (theNewTask !== '') {
      this.tasksCollection.add({title: theNewTask, status: 'open'});
    }
  }

  markAsDone(slidingItem: ItemSliding, task: Task) {
    this.tasks.update(task.$key, { status: 'done' });
    slidingItem.close();
  }

  removeTask(slidingItem: ItemSliding, task: Task) {
    task.status = "removed";
    let index = this.tasks.indexOf(task);
    if (index > -1) {
      this.tasks.splice(index, 1);
    }
    slidingItem.close();
  }
}

关于如何解决这个问题的任何建议？提前致谢！

【问题讨论】：

我建议看看这个 youtube 教程：youtu.be/gUmItHaVL2w
而不是使用 valuechanges()，您应该使用 snapshotchanges 来获取 id。在这里阅读更多：github.com/angular/angularfire2/blob/master/docs/firestore/…

标签： angular firebase ionic3 google-cloud-firestore angularfire2

【解决方案1】：

我所做的是在创建任务文档时将 TaskId 添加到它：

addItem() {
  let id = this.afs.createId();
  let theNewTask: string = prompt("New Task");
  if (theNewTask !== '') {
    this.tasksCollection.add({title: theNewTask, status: 'open', id});
  }
}

这样我可以很容易地得到它来更新或删除：

markAsDone(slidingItem: ItemSliding, task: Task) {
  this.tasksCollection.doc(task.id).update({ status: 'done' });
  slidingItem.close();
}

【讨论】：