Angular 将集合动态添加到子集合（或从子集合获取唯一Id？）

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

Firebase代码：

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

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

我有两个方案，第一个方案是获取不同列表的唯一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");
      }
   }

第二个计划是在用户（文档）后面创建任务集合，然后分配不同列表的id。但是，仍然需要我获取id，对此我感到困惑

---

有人能给我一些建议吗？非常感谢。

我现在正在做的事情是将添加任务方法放在列表上。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>

添加任务
任务名称
任务日期
任务说明
添加任务

我现在要做的是将add task方法放在列表中。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>

添加任务
任务名称
任务日期
任务说明
添加任务