Question

我正在为报纸写一个小型网站，并且试图制作主页以显示最新新闻和每张照片。我使用Firebase实时数据库和Firestorage存储新闻和照片。当获取数据并显示它时，我首先将所有数据保存在一个对象数组中，然后显示它（因此它保持顺序）。

问题在于，当我调用该函数以显示它时，没有显示指向照片的链接。

我尝试使用console.log(arrayName)输出数组，一切看起来都应该如此。但是当我尝试console.log(arrayName[1].sos)时却什么也没显示。

db.collection("articole").orderBy("data", "asc").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        articolTmp = {
          titlu: doc.data().titlu,
          subtitlu: doc.data().subtitlu,
          id: doc.id,
          poza: doc.data().poza,
          data: doc.data().data,
          sos: ""
        };
        articole.push(articolTmp);
    });
    show();
});

function show(){
  for(let i = 1; i < articole.length; ++i){
    var pathReference = storage.ref('pozeArticole/' + articole[i].poza);
    pathReference.getDownloadURL().then(function(url){
       articole[i].sos = url;
    });
}
  showw();
}

function showw(){
  // this is the console.log I was talking about
  console.log(articole);
  for(let i = 1; i < articole.length; ++i){
    console.log(articole[i].sos);
    var div = document.createElement("div");
    var titlu = document.createElement("h3");
    var subtitlu = document.createElement("p");
    var link = document.createElement("a");
    var poza = document.createElement("img");
    poza.src = articole[i].sos;
    poza.alt = "alt";
    link.href = "viz.html?id=" + articole[i].id;
    titlu.innerHTML = articole[i].titlu;
    subtitlu.innerHTML = articole[i].subtitlu;
    document.getElementById("main").appendChild(div);
    link.appendChild(titlu);
    div.appendChild(link);
    div.appendChild(subtitlu);
    div.appendChild(poza);
  }

Answer 1

您的问题出在show函数中。调用showw的最后一行代码在“其上方”一行articole[i].sos = url;之前执行。这是为什么？因为您正在使用异步操作。获取下载URL的代码在另一个线程中执行。只要该代码完成，您提供的代码块（articole[i].sos = url;）将被执行。我建议阅读有关异步操作和.round的内容。

因此，要解决您的问题，您已将showw调用移到了其上方的块内。该块应为：

pathReference.getDownloadURL().then(function(url){
   articole[i].sos = url;
   showw();
});`

奇怪的对象行为

1 个答案: