陣列解釋爲對象在聚合物中的DOM重複

我在聚合物使用dom-repeat用於轉發火力地堡加載了一個數組，我想不通，爲什麼我得到「的項目預期陣列，發現對象」錯誤如下面的屏幕截圖所示。這裏是我使用的代碼：陣列解釋爲對象在聚合物中的DOM重複

<data-firebase data="{{cardsetList}}" requested-location="card-sets" user="{{user}}"></data-firebase> 

    <template is="dom-repeat" items="[[cardsetList]]"> 
     <paper-card image="../images/trip.png" alt="Donuts" class="amber" > 
      <div class="card-content">Test {{index}}</div> 
     </paper-card> 
    </template>

瀏覽器視圖&控制檯

數據火力是加載從FB的數據，因爲你，我已經創建了一個元素可以在控制檯中看到成功（2個物體的陣列是我想要加載的

加載前的空數組 我檢查了在加載前我有沒有數組中的數組，但正如您在控制檯中看到的那樣，它只是一個空數組。如果我停止從火力地堡加載數據，也沒有錯誤

在火力地堡 我還檢查在FB中的數據，它被表示爲一個JSON陣列有意義的陣列（我可以看到，當我導出數據，在數組括號[]）中的數據導出

問題：數據被加載，但錯誤依然存在 如何它可以是的DOM重複發生（因爲你可以看到它被渲染），並在控制檯有一個數組，但我得到這個錯誤仍然？

非常感謝！

親切的問候，添

來源

2016-12-30 gerd hübner

我的理解是，有在火力數組的支持和陣列獲取存儲爲「對象」與整數作爲鍵名。

// we send this 
['hello', 'world'] 
// Firebase stores this 
{0: 'hello', 1: 'world'}

在這裏看到：

https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

這也將成爲你得到正是回來。

來源

2016-12-30 15:31:56

確實如此，它是作爲Firebase中的對象存儲的。但我在我的應用程序中的其他地方使用它，無論如何，我使用的是一個對象的孩子的數組。據我的理解，當你從Firebase重新加載時，它會被轉換爲一個數組（如你在控制檯中看到的，它似乎把它解釋爲一個數組，或者不是？也可以重複處理它）。 –

此外，您的鏈接中引用了一段話：「但是，爲了幫助那些在Firebase中存儲數組的人，當您調用.val（）或使用REST api讀取數據時，如果數據看起來像一個數組，Firebase將呈現它作爲一個陣列。「現在我不知道聚合物是如何從Firebase加載的，但正如我所說的，我經歷過它在其他地方工作，它被作爲數組處理（我甚至使用拼接等，它工作正常）。 –

使用這個孩子，例如「cardsetList.0.card-items」（包含一個數組），dom-repeat可以工作，並且不會出現錯誤。數據在聚合火力的「最高」水平上如何解決似乎有些事要做...... –

我想通了。在開始時，用戶似乎並沒有通過fb-auth提供足夠快的速度。因此，當用戶爲空時，firebase會嘗試從不存在的位置加載數據，從而創建對象。

我增加了以下計算的結合：

功能

 hasContent: function(checkLength) { 
     return checkLength.length > 0 ? checkLength : []; 
    }

而在HTML

<template is="dom-repeat" items="[[hasContent(cardsetList)]]" as="cardItemLoop"> 
    ... 
</template>

但propably我將不得不考慮我如何防止查詢/數據綁定是在沒有用戶提供的情況下完成的。

而且這似乎是指firebase-document defaults to {} before resolving #33

來源

2016-12-30 17:22:29

如果它不晚，以防止查詢，刪除你的路徑和後，當你有你的權威性對象設置你的路徑JS上。因此，您的查詢將不會有路徑，然後在您的標記中以及auth的成功回調中，您將設置如下所示的路徑。

signInFb: function() { 
    this.$.auth.signInWithRedirect().then(function(response) { 
     this.$.yourQueryElementID.path = "your path here" ; 
    }.bind(this)).catch(function(error) { 

    }.bind(this)); 
    },

來源

2017-04-16 15:29:33 TheeBen

陣列解釋爲對象在聚合物中的DOM重複

回答

相關問題