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.
