Question

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

@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

我正在按照使用Ionic进行移动应用程序开发，修订一书中的教程进行操作。但是安装了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();
  }
}

有关如何解决此问题的任何建议？提前谢谢！

Answer 1

我要做的是在创建TaskId时将其添加到Task文档中：

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

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

1 个答案: