How to get the data of subcollection and show them in the page?

Ionic Framework
1

I want to show the “task” from firebase on my HTML page.

I used ionic4, here is my firebase:

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

When I add tasks into firebase, I want to show it on my page.

Here is my add task method:

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='')
 }
}

The method in my service.ts:

...
addTask( 
    taskName:string,
    taskDate:string,
    taskNote:string,
    listId:string,):Promise<firebase.firestore.DocumentReference>{
      return this.listRef
      .doc(listId)
      .collection("task").add({taskName,taskDate,taskNote})
  }
}
...

My html page of creating a new task into the list:

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

Shall I create a task-detail page to pass parameters? But how to get the id of the task? I am quite confused, thx.

2

try to get return id from firebase it will return you newly created id or last created it follow the docs for doing it

3

Add this code in ionviewdidenter function
this.auth.authState.subscribe(user => {

if (user && user.uid) {

  this.userId = user.uid

  this.fireStoreTaskList = this.firestore.doc<any>('users/' + this.userId).collection('tasks').valueChanges();

  this.fireStoreList = this.firestore.doc<any>('users/' + this.userId).collection('tasks');

}

});