“Uncaught TypeError：无法使用Polymer 3和polymerfire3读取属性'push'of null”

Posted 2021-04-12

我正在与Polymer 3和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元素有关吗？

答案

您需要添加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. 
}

另一答案

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 bound-variable以反映新列表。