“未捕获TypeError:无法使用聚合物3和polymerfire3读取null的属性'push‘”

Question

我正在与Polmerd3和polymerfire3合作一个项目。现在，我已经能够成功地使用firebase-auth元素。但是现在我正在尝试使用firebase-query元素，我在控制台Uncaught TypeError: Cannot read property 'push' of null上得到了如下结果

这是我的代码

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import 'polymerfire3/firebase-auth.js';
import 'polymerfire3/firebase-query.js';

class PerfilView extends PolymerElement {
  static get properties() {
    return {
      user: Object,
      uid: String,
      data: {
        type: Object,
        observer: 'dataChanged'
      }
    };
  }

  static get template() {
    return html`

      <firebase-auth
        id="auth" user="{{user}}">
      </firebase-auth>

      <firebase-query
        log
        id="query"
        app-name="morse"
        path="/notes/"
        data="{{data}}">
      </firebase-query>

      <div class="card">
        <div id="notes">
          <ul id="notes-list">
            <template is="dom-repeat" items="{{data}}" as="note">
              <li>
                <p class="content">{{note}}</p>
              </li>
            </template>
          </ul>

          <paper-input value="{{inputP::input}}" label="Take a note.."></paper-input>
          <div id="notes-controls">
            <paper-button id="add" on-tap="add">Add</paper-button>
          </div>
        </div>
      </div>
    `;
  }
  add() {
    this.$.query.ref.push({
      content: this.inputP
    });
  }
}

window.customElements.define('perfil-view', PerfilView);

它与polymerfire3元素有关吗？

Answer 1

您需要添加polymer-document才能添加记录。除了你的代码之外，还有一些类似的东西：

  <firebase-document
    id="document"
    app-name="morse"
    path="/notes/[[key]]"
    data="{{edata}}">
  </firebase-document>

推送新数据可能看起来像这样；

add() {
    var key = firebase.database.ref('notes').push().key;
    this.set('edata', this.inputP);
    this.set('key', key); 
    // this new Note will be syncronised upon new key and edata properties defined. Here firebase-document will keep sysnronised with edata and path. 
}

Answer 2

firebase-query元素主要用于-

将给定的属性组合到查询选项中，生成查询，请求一组经过过滤的、有序的、不可变的Firebase数据

Here还有更多值得阅读的地方。

我认为，你想做的事情，可以简单地实现如下：

add(noteData) {
    let newNoteRef = firebase.app().database().ref('notes').push();

    return newNoteRef.set(noteData).then(() => {
       console.log(`a new note successfully added.`);
    });
}

在成功获取数据后，upsert firebase-query将自动更新data绑定变量以反映新列表。