Question

我无法在应用程序上显示来自Firebase的数据。我真的很陌生，我不知道该怎么办。我在互联网上找不到任何解决方案。

这是我的打字稿代码：

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));
}

}

这是我的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>

如何在我的应用程序上显示数据？

有人说我应该做出Promise解决方案，但我真的不知道如何将其与之整合。

屏幕截图：

screenchot

Answer 1

看看您的代码，[object Promise]来自<Label class="h3 p-15" text='{{stuff}}' textWrap="true"></Label>（请通过删除其他表或在此标签上添加其他颜色来确认）。

实际上，stuff被初始化为一个承诺。相反，您必须删除该初始化，然后在ngOnInit()内执行：

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));

我不是Firebase专家，但希望对您有所帮助。

我的Android应用使用Nativescript显示[object Promise]

1 个答案: