如何使用 promise 对象绑定聚合物模板 dom-repeat？

Question

我尝试使用这个调用firestore的函数绑定下拉值然后我使用promise返回值

HTML

<template is="dom-repeat" items="{{_modOptsArry(item.modKey)}}" as="opt">
     <paper-item value="{{opt.$key}}">{{opt.obj.val}}</paper-item>
</template>

JavaScript

_modOptsArry(modeKey) { 
    let opts = [];
    var promise = new Promise((resolve, reject) => {
        firebase.firestore().collection("record").doc("s1").collection("class").orderBy('o').onSnapshot(function (querySnapshot) {
            // let opts = [];
            querySnapshot.forEach(function (doc) { 
                var model = doc.data(); 
                opts.push({ $key: doc.id, obj: { val: model.nm } });
            });
            resolve(opts); 
        })
    })
    promise.then(function (result) {
        return Promise.resolve(result); // Here i am returning array but in the dom-repeat it not binding values because it is returning Promise Object My Array is there inside this Promise object. how to resolve this problem..
    }); 
}

Answer 1

有一个看起来像这样的函数

getDropdownItems(props, item) {
    if (!this.props[item])
        this._modOptsArry(item);
    return this.props[item]
}

让您的_mopOptsArry 方法将结果分配给this.props[item]；然后通知对象。像这样：

this.props[item] = yourResultArray;
this.notifyPath('props.' + item);

有一个名为props 的属性，其值为{}

然后在你的html中，而不是调用this._modOptsArry；致电[[getDropdownItems(props.*, item.modkey)]]

Answer 2

像这样改变你的方法：

_modOptsArry() { 
    let opts = []
    const that = this
    firebase.firestore().collection("record").doc("s1").collection("class").orderBy('o').onSnapshot(function (querySnapshot) {
        querySnapshot.forEach(function (doc) { 
            var model = doc.data()
            opts.push({ $key: doc.id, obj: { val: model.nm } })
        })
        that.set('myArray', opts)
    })
}

只需将 myArray 绑定到 dom-repeat 模板

<template is="dom-repeat" items="{{myArray}}" as="opt">
     <paper-item value="{{opt.$key}}">{{opt.obj.val}}</paper-item>
</template>