javascript - 使用带有 CSS 背景属性和 url() 的 firebase 存储图像 URL

Question

更新

我将 forEach 包装在一个 promise 中，以修复我面临的中间错误，但我又回到了开始的地方。我只是想将 self.data 作为函数之间的参数传递，但它没有解决任何问题。

更新

我想我将 self.data 错误地返回给 loadData 但我不确定我做错了什么。

this.loadData = async function() {
    var db = firebase.firestore();

    // Disable deprecated features
    db.settings({
      timestampsInSnapshots: true
    });

    var docsRef = db.collection("pools").doc(window.currentPoolId).collection("list").where("active", "==", true).orderBy("date").limit(8);

    var counter = 0;

    var result = await docsRef.get();

    console.log("querySnapshot result: "+result);
    result.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
        self.data.push(doc.data());

        console.log("result.size: "+result.size);
        console.log("self.data.length: "+self.data.length);
        console.log("counter in loadData: "+counter);
        if(result.size - 1 == counter) {
            console.log("returning self data: "+JSON.stringify(self.data));
            return self.data;
        }

        counter++;
    });
}

上面的函数是这样调用的(我认为由于范围的原因需要是window.pool.loadData，而不是this.loadData):

var result = await window.pool.loadData();console.log("result in populate else: "+result);

输出:

result in populate else: undefined

更新

我很确定这是在发生，因为当我引用 window.pool 时 pool global 还没有创建 -我想我在 pool global object 中使用 this 时遇到了问题(因为这段代码在 pool 全局对象，但我要再试一次。

使用 this.data[this.total_boxes].downloadURL 后，我得到了相同的结果 - 它在 console.log 消息中正确打印，但我得到同样的错误说它是 undefined。

我不确定是不是我的实例化顺序有问题。

---

我正在尝试使用将图像上传到 firebase 存储 后检索到的 downloadURL。我试图在 url() css 函数中使用它，但我收到一条错误消息:

TypeError: undefined is not an object (evaluating 'window.pool.data[window.pool.total_boxes].downloadURL')

我现在正在使用 cordova 构建 iOS。我在我的 javascript/css 中使用这样的 downloadURL:

var item_box = document.createElement("div");
item_box.style.flex = "1 0 50%";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.style.borderBottom="2px solid #9a9a9a";

//THIS IS WHERE  I USE THE `downloadURL`, ALL OTHER CODE IS FUNCTIONAL
item_box.style.background = "no-repeat center/100% url("+window.pool.data[window.pool.total_boxes].downloadURL+")";

item_box.id = "item_box_"+this.total_boxes;

我在上面的代码之前有这三个控制台消息:

console.log("window.pool.data: "+JSON.stringify(window.pool.data));
console.log("window.pool.total_boxes: "+window.pool.total_boxes);
console.log("window.pool.data[0].downloadURL: "+JSON.stringify(window.pool.data[window.pool.total_boxes].downloadURL));

他们输出:

[Log] window.pool.data: [{"active":true,"date":"1544583167324","description":"Comp","downloadURL":"https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx","item":"Computer"}] (cordova.js, line 1732)
[Log] window.pool.total_boxes: 0 (cordova.js, line 1732)
[Log] window.pool.data[0].downloadURL: "https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx" (cordova.js, line 1732)

item_box 元素实例化后(尚未添加到 DOM)我收到此控制台消息:

console.log("item_box.style.background: "+item_box.style.background);

输出:

item_box.style.background: url("https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx") center center / 100% no-repeat

所以看起来 window.pool.data[window.pool.total_boxes].downloadURL 不是未定义的。

当我看到对象具有正确的数据时，为什么我会收到 undefined is not an object 错误？

Answer 1

这最终变成了一个“糟糕”的时刻，但由于我设置日志消息的方式，这非常棘手。看起来该值是未定义的，但实际上，它只是在循环的下一次通过时未定义(item_box 元素是在循环内创建的)，因为循环变量的大小大于数据数组。

在我的代码中有一处:

for (var i = 1; (i * this.total_rows) < (9 * this.total_rows); i++) { ...

需要:

for (var i = 1; (i * this.total_rows) < ((dataz.length + 1) * this.total_rows); i++) { ...

注意 9 是一个固定数字，因此它不会随着传入数据的大小而波动(表示 this.data 的参数 - 数据z).