ポリマー：dom-ifを使用したヘルプ

Question

dom-ifが指定されたコードで動作していません！コードは処理中であり、デバッグではtrueを返します。しかし、テンプレートは表示されません！

なぜテンプレートが表示されないのですか？

<template is="dom-repeat" items="[[persistedProducts]]" as="product"> 
    <template is="dom-if" if="{{isProductLiked(product)}}"> 
    <paper-button on-click="dislikeThisProduct" 
     title="Click to UnLike" class="title-rose"> 
     <iron-icon icon="icons:thumb-up" class="title-rose" style="width:28px; height:17px;"></iron-icon> 
     Liked 
    </paper-button> 
    </template> 
</template> 

isProductLiked: function(product) { 
    let uid = this.user.uid; 

    //Add visitor/user details here.. 
    this.$.queryProductLikes.disabled = false; 
    this.$.queryProductLikes.ref.child(product.$key).child(uid).on("value", function(snapshot) { 
    if(snapshot.val() != null) { 
     //Display Like - if Liked. 
     if(snapshot.val().isLiked) { 
     return true; 
     } 
     return false; 
    } else { 
     //Not Liked 
     return false; 
    } 
    }); 
} 

Answer 1

私はこの問題はisProductLiked機能であると思う：

this.$.queryProductLikes.ref.child(product.$key).child(uid).on("value", function(snapshot) { 
    if (snapshot.val() != null) { 
    if (snapshot.val().isLiked) { 
     return true; 
    } 
    return false; 
    } else { 
    return false; 
    } 
}); 

あなたはtrueやfalseを返すときに、あなたがisProductLikedに戻っていない、ここでは匿名関数（... function(snapshot) { ...）を使用しますしかし、この無名関数で。

編集

私はこれらがまたは動作しない場合がありFirebaseに精通していないです：

解決策＃1

1. クエリの製品はisProductLiked関数の外で好き。
2. 結果に基づいてプロパティを設定します。 （この例ではproductLikesそれを呼び出すことができます）
3. このようなdom-ifでこの結果を使用します。<template is="dom-if" if="{{isProductLiked(product, productLikes)}}">
4. productLikesパラメータを含めるようにして、新しいロジックを処理するためにisProductLiked機能を変更します。

ここでの考え方は、isProductLiked関数からの非同期関数呼び出しを削除することです。

可能な溶液＃2

persistedProductsがあまりにも同類が含まれているので、データストレージやクエリを再設計します。だからdom-ifと書くことができます：<template is="dom-if" if="{{product.isLiked}}">。