Question

我正在创建一个dom-module来在div中显示我的firebase数据。我在https://www.youtube.com/watch?v=9AHDSGitDP0&t=639s跟随了Polycast视频，但firebase-query组件没有提取数据。除了我登录的用户数据之外，控制台中没有数据显示且没有错误。我看到其他人在使用Polymerfire吸收数据时遇到了问题，我在这里尝试了解决方案，但没有运气：Polymer + Firebase (Polymerfire): <firebase-query> not working inside single page app view (with <firebase-app> located in my-app.html)

有人可以帮忙吗？

在我的主html页面中，我有以下内容：

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/polymerfire/polymerfire.html">
    <link rel="import" href="../bower_components/polymerfire/firebase-app.html">
    <link rel="import" href="../bower_components/polymerfire/firebase-database-script.html"> 
    <link rel="import" href="../bower_components/webcomponentsjs/webcomponents-lite.js">
    <link rel="import" href="elements/browse-events.html"> <!-- my custom component -->
</head>

<body>
            <firebase-app
                api-key=""
                auth-domain=""
                database-url=""
                project-id=""
                storage-bucket=""
                messaging-sender-id="">
            </firebase-app>

            <!-- my custom component -->
            <browse-events></browse-events>

</body>

以下是我的组件文件（browse-events.html）中的代码

<!-- dependencies -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-database-script.html">
<link rel="import" href="../bower_components/polymerfire/firebase-database-behavior.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">

<dom-module id="browse-events"> 
    <template>
        <firebase-query
                        id="query-all"
                        app-name="authtest-54513"
                        path="/events"
                        data="{{events}}">
        </firebase-query>

        <template is="dom-repeat" items="[[events]]" as="event">
            <div> 
                <h1>[[event.title]]</h1>
            </div>
        </template>
    </template>

    <script>
        Polymer({
            is:'browse-events',
            properties: {
                events: {
                    type: Object
                }
            }
        });
    </script>
</dom-module>

Answer 1

如果您在firebase-query中使用app-name，则需要在name中指定firebase-app。如果您只在应用中使用一个firebase-app，则可以省略name中的firebase-app和其他聚合火花元素中的app-name。

属性events可能是数组而不是对象：

如果查询的子节点是对象（大多数情况），data将会是添加了额外$key字段的那些对象的数组代表关键。如果子节点是非对象叶值， data将是结构{$key: key, $val: val}的对象数组。 https://github.com/firebase/polymerfire/blob/master/firebase-query.html

旁注：您只需要在firebase-query元素中导入browse-events。 Firebase查询将导入自己运行所需的脚本。（对于你主要的html页面中的firebase-app也一样）

使用polymefire firebase-query元素没有返回任何数据

1 个答案: