更新
我将 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
错误?
最佳答案
这最终变成了一个“糟糕”的时刻,但由于我设置日志消息的方式,这非常棘手。看起来该值是未定义的,但实际上,它只是在循环的下一次通过时未定义(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
).
关于javascript - 使用带有 CSS 背景属性和 url() 的 firebase 存储图像 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53743768/