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

Question

I've installed these packages:

@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

I'm following the tutorial in the book Mobile App Development with Ionic, Revised . But installing angularfire2, installed a version that deprecated the Realtime Database, suggestion to use the Firestore. So I want to try that, but I can seem to select a single doc.

My tasklist.html (according to the book still):

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

My tastlist.ts (with the addItem() function changed successfully, but a non-functioning update and delete, because I can't seem to get the $key from the selected task):

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();
  }
}

Any advice on how to tackle this problem? Thanks in advance!

Answer 1

What I've done is adding the TaskId to the Task document when creating it:

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

That way I can easily get it for updating or deleting:

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