Question

我的Cloud Firestore数据库中有一些数据。我正在尝试检索数据并将其显示在子html页面中，但是这阻止了我，而没有任何控制台日志消息。我已经能够通过setupProp函数将数据检索到我的主页，但是当我添加setupIndProp函数以将数据传递到我的子html页面时，它不起作用。注意：当我删除setupIndProp（data）函数时，它会显示在我的页面上，但没有任何动态数据（仅用于测试），但是当我像下面的代码一样保留它时，它就会消失。下面的代码是我从数据库中检索数据的地方：

// get data from the cloud Database
db.collection('properties').onSnapshot(snapshot => {
    setupProp(snapshot.docs);
    setupIndProp(snapshot.docs);  // added setupIndProp func in order to pass my data to my sub html page

});

这是我的sub html页面的js文件，在添加setupIndProp时出现问题：

const allProperties = document.querySelector('.all-properties');
    const setupIndProp = data => {
        data.forEach(doc => {
            const info = doc.data();
            let html = `
            <div class="row">

                  <div class="col l6 s12 m12">
                      <div class="card" style="height: auto; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
                          <h5 class="center">${info.title}</h5><br><br>
                          <span style="font-weight: bold;">Price: ${info.price} &#36;</span><br><br>
                          <span><i class="material-icons blue-text">room</i> Located in ${info.city}</span><br><br>
                          <span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br>
                      </div>
                  </div>


            </div>
            `;

            allProperties.innerHTML = html;
        })

    }

这是我的子HTML页面，什么都没有显示：

<div class="container all-properties" style="height: auto;">

    </div>

我无法将数据检索到我的DOM

0 个答案: