动态地将集合添加到子集合中（或从子集合中获取唯一 ID？）

Question

我正在尝试将新集合动态添加到现有子集合中的文档中。

Firebase 代码：

userProfile(Collection)
|
user(document)
  |
 list(Collection)
  |
 list1(document),list2......

我想创建一个新的集合“任务”，我希望用户可以在特殊列表（如列表1）页面上添加一个任务，然后将某个任务添加到列表1的文档中，如果他们在列表2中这样做页面。

我有两个方案，第一个是获取不同列表的唯一 id，然后使用 collection() 和 doc()，但它没有按照我的方式工作。 这是我在 task.ts 中的代码：

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import {ListDetailPage} from "../../pages/list-detail/list-detail.page"
import { ListService } from '../../services/list/list.service';
import { ActivatedRoute } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class TaskService {
 public taskRef: firebase.firestore.CollectionReference;
 public currentList :any = {};
 public listId = this.route.snapshot.paramMap.get('id');

 constructor(private route:ActivatedRoute,) {

  this.loadTaskRef(this.currentList);

  firebase.auth().onAuthStateChanged(list => {
    this.loadTaskRef(this.listId);
  });


 }

  loadTaskRef(listId:any): void{
      if(listId){
        this.taskRef = firebase
        .firestore()
        .collection("/list-detail/").doc(this.listId)
        .collection("/task");
      }
   }

第二个计划是在user(document)后面创建任务集合，然后分配不同列表的id。但是，仍然需要我获取 id，我对此感到困惑。

有人可以给我一些关于如何做到这一点的建议吗？非常感谢。

Answer 1

我现在做的就是把add task方法放到list.ts上：

import { Component, OnInit } from '@angular/core';
import { ListService } from '../../services/list/list.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-list-detail',
  templateUrl: './list-detail.page.html',
  styleUrls: ['./list-detail.page.scss'],
})
export class ListDetailPage implements OnInit {
  public listId :string;
  public currentList: any = {}; 
  public taskName = '';
  public taskDate = '';
  public taskNote ='';

  constructor(
    private listService:ListService,
    private route:ActivatedRoute,
    ) { }

  ngOnInit() {

    this.listId = this.route.snapshot.paramMap.get('id');

    this.listService
    .getlistDetail(this.listId)
    .get()
    .then(listSnapshot => {
      this.currentList = listSnapshot.data();
      this.currentList.id = listSnapshot.id;
  });
}

 addTask(
  taskName:string,
  taskDate:string,
  taskNote:string,
 ):void{
   this.listService.addTask(
     taskName,
     taskDate,
     taskNote,
     this.currentList.id
   )
   .then(() => this.taskName='')
   .then(() => this.taskDate='')
   .then(() => this.taskNote='')
 }
}

这是我的html的相关代码：

   <ion-card>
      <ion-card-header>Add Task</ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label position="stacked">Task Name</ion-label>
          <ion-input
          [(ngModel)] = "taskName"
          type="text"
          placeholder="Please enter your task">
          </ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Task Date</ion-label>
          <ion-datetime
          [(ngModel)] = "taskDate"
          displayFormate = "mm hh a,D MMM, YY"
          pickerFormat = "mm hh a DD MMM YYYY"
          ></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Task Note</ion-label>
          <ion-input
          [(ngModel)] = "taskNote"
          type="text"
          placeholder="Detail your task">
          </ion-input>
       </ion-item>

       <ion-button expand="block"
       (click)="addTask(taskName,taskDate,taskNote)">
          Add Task
       </ion-button>

      </ion-card-content>
    </ion-card>