My android app shows [object Promise] using Nativescript - firebase

Question

I cannot show my data from my firebase on my app. I am really new to this and I don't know what to do. I can't find any solution for this on the internet.
This is my typescript code:
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute, ActivatedRouteSnapshot } from "#angular/router";
import { Item } from "./item";
import { ItemService } from "./item.service";
import { EventData } from "tns-core-modules/data/observable";
import { Label } from "tns-core-modules/ui/label";
import { listener } from "#angular/core/src/render3";
const firebase = require("nativescript-plugin-firebase");
const firebaseWebApi = require("nativescript-plugin-firebase/app");
#Component({
selector: "ns-details",
moduleId: module.id,
templateUrl: "./item-detail.component.html",
})
export class ItemDetailComponent implements OnInit {
item: Item;
public oneway;
public stuff = firebaseWebApi.database().ref("/WaterStatus")
.once("value")
.then(result => console.log(JSON.stringify(result)))
.catch(error => console.log("Error: " + error));
constructor(
private itemService: ItemService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
const id = +this.route.snapshot.params["id"];
this.item = this.itemService.getItem(id);
var onChildEvent = function(oneway) {
console.log("Water Status: " + JSON.stringify(oneway.value));
};
// listen to changes in the /users path
firebase.addChildEventListener(onChildEvent, "/WaterStatus").then(
function(listenerWrapper) {
var path = listenerWrapper.path;
var listeners = listenerWrapper.listeners;
}
);
firebase.getValue('/WaterStatus')
.then(result => console.log(JSON.stringify(result)))
.catch(error => console.log("Error: " + error));
}
}
and this is my html:
<ActionBar title="Details" class="action-bar"></ActionBar>
<FlexboxLayout flexDirection="column" class="page">
<FlexboxLayout class="m-15">
<Label class="h2" [text]="item.id + '. '"></Label>
<Label class="h2" [text]="item.name"></Label>
</FlexboxLayout>
<Label class="h3" [text]="item.role"></Label>
<!-- <Button text="Tap Me!" tap="onTap" class="btn btn-primary btn-active"></Button> -->
<br>
<br>
<Label class="h3 p-15" text='{{oneway}}' textWrap="true">{{oneway}}</Label>
<Label class="h3 p-15" text='{{stuff}}' textWrap="true"></Label>
<Label class="h3 p-15" text='{{last}}' textWrap="true">{{last}}</Label>
</FlexboxLayout>
How can I show my data on my app?
Some say that I should do Promise resolve but I don't really know how to integrate it with that.
screenshot:
screenchot

Answer 1

Looking at your code, the [object Promise] comes from <Label class="h3 p-15" text='{{stuff}}' textWrap="true"></Label> (please confirm by removing the other tables or adding a different color to this label).
In fact, stuff is initialized as a promise. Instead, you have to remove that initialization, and inside ngOnInit(), do:
firebaseWebApi.database().ref("/WaterStatus")
.once("value")
.then(result => {
console.log(JSON.stringify(result)));
this.stuff = result; // or result.something?
})
.catch(error => console.log("Error: " + error));
I am not a firebase expert, but I hope it helps.