Question

我有一个vaadin-grid，我想显示来自firebase数据库的数据列表。我知道根据文档，这个结构很难看，我应该为此创建另一个子树，但只是想做一个概念验证。所以这是代码：

ready() {
    var items = [];
    if (this.locationKey) {
      var territoryRef = firebase.database().ref('Territories').child(this.locationKey);
      var householdRef = firebase.database().ref('Households');
      var contactsRef = firebase.database().ref('Contacts');

      territoryRef.once('value').then((terrSnap) => {
        terrSnap.forEach((terrChildSnap) => {
          var territoryName = terrChildSnap.val().name;
          var territoryKey = terrChildSnap.key;

          householdRef.child(territoryKey).once('value').then((householdSnap) => {
            if (householdSnap.val()) {
              householdSnap.forEach((householdChildSnap) => {
                var household = householdChildSnap.val();
                var householdName = household.name;
                var householdKey = householdChildSnap.key;

                contactsRef.child(householdKey).once('value').then((contactsSnap) => {
                  if (contactsSnap.val()) {
                    contactsSnap.forEach((contactsChildSnap) => {
                      var contacts = contactsChildSnap.val();
                      var contactsName = contacts.name;
                      var contactsKey = contactsChildSnap.key;

                      items.push({ territory: territoryName, name: contactsName, household: householdName, nationality: contacts.nationality, language: contacts.language || "" });

                    })
                  }
                })
              })
            }
          })
        })
        this.items = items;
      }).catch((err) => {
        console.error(err)
      });

    }
  }

我只是把items数组放在网格中

<vaadin-grid id="grid" aria-label="Contacts Summary" items="[[items]]">
  <vaadin-grid-column width="50px" flex-grow="0">
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>...

网格加载正常，但不显示数据。我可以确认这个.items已填充。虽然没有在网格中显示。请让我知道我做错了什么。谢谢

Answer 1

this.items只设置值，但是如果你想让它实际通知dom-repeat有关更改（或任何类型的聚合物元素），你必须使用this.set（＆＃39; items＆＃39;，项目）。 This.set（）向所有聚合物元素发送一个事件，例如dom-repeat，变量已经改变。

我对firebase.database（）不熟悉，但如果它自动更新，则需要使用this.push（＆＃39; items＆＃39;，item）。如果更改用于填充dom-repeat的数组的长度，dom-repeat通常只会更新。

如果要查看现有元素中特定属性的更新，则需要使用this.set（），但在替换更改的元素之前，请确保删除对原始数组（this.items）的任何引用。我通常使用 var items = JSON.parse（JSON.stringify（this.items））;而不只是 var items = this.items 。否则，Polymer将对新更新的数组进行脏检查，并发现没有更新的值（因为items是对this.items的引用），因此不更新DOM。

此外，ready（）应该准备就绪：function（）

聚合物从firebase实时数据库更新javascript数组

1 个答案: