I have developed an application that collects user input and uploads it to firebase firestore. However, when I retrieve the documents from firestore to display on another page using a component, it shows [object, object] instead of the actual data. I am struggling to figure out how to resolve this issue. Any suggestions or advice would be greatly appreciated.
export interface Item{
id?: string,
createdAt: number,
title: string,
description:string,
carType:string,
typeID: number,
color: string,
colorId: number
}
//item.service.ts
export class ItemService {
//property of items collection
itemsCollection: AngularFirestoreCollection<Item>;
items: Observable<any[]>;
constructor(public fsDb: AngularFirestore) {
this.items = this.fsDb.collection('complete-
entry').valueChanges();
}
getItems(){
return this.items;
}
}
//items.component.ts
export class ItemsComponent implements OnInit {
items: Item[];
constructor(private itemService: ItemService) { }
ngOnInit() {
this.itemService.getItems().subscribe(items=>{
console.log(items);
this.items = items;
})
}}
//items.component.html
<div *ngIf="items?.length >0;else noItems">
<ion-list *ngFor="let items of items" class="collection">
<ion-item class="collection-item">
<strong>{{items.title}}: </strong>{{items.description}} <br>
</ion-item>
</ion-list>
</div>
<!-- if there are not items display -->
<ng-template #noItems>
<hr>
<h5>There are no items to display</h5>
</ng-template>