My application uses Angular 6 and Firebase. I am trying to showcase a list of all appointments. Below is my approach:
service.ts
getRDV() {
this.rdvList = this.firebase.list('/rdv');
return this.rdvList;
}
Model:
export class RDV {
key: string;
date: string;
heure: string;
spe: string;
uidpat: string;
uid: string;
status: string;
}
In ts :
export class ListComponent implements OnInit {
rdvList: RDV[];
constructor(
private usersService: UsersService,
private router: Router
) {}
ngOnInit() {
var x = this.usersService.getRDV();
x.snapshotChanges().subscribe(item => {
this.rdvList = [];
item.forEach(element => {
var y = element.payload.toJSON();
y["$key"] = element.key;
this.rdvList.push(y as RDV);
})
console.log(this.rdvList)
})
}
}
In Html :
<tr *ngFor="let rdv of rdvList| myfilter:term, let i = index">
<div *ngFor="let item of rdvList.rdv.key">
<td> {{item.$key}} </td>
<td> {{item.uidpat}} </td>
<td> {{item.date}} </td>
<td> {{item.heure}} </td>
<td> {{item.spe}} </td>
<td> {{item.uid}} </td>
<td>
<button class="btn btn-primary" (click)="onViewUser(user?.uid)">
Choisir
</button>
</td>
</div>
</tr>
DATA STRUCTURE: https://i.sstatic.net/EfxWf.png
I am having trouble resolving the issue with the data structure. Should I consider changing how they are pushed into the table or utilize the template *ngfor to address the problem.