如何在我设计的 html 页面中使用快照/查询快照显示/显示从数据库获取的数据？

Question

我尝试了.innerhtml 的方式，但不知道为什么它只显示一个空白页。

当我使用snapshot 而不是querysnapshot 时，它可以工作，但显示不同（最后输入的文档）而不是搜索的。

功能代码

function renderHTML(doc){
  // TODO: do something with the data 

  // To create elements (such as list or span) 
  var plano = document.createElement('span');
  plano.innerHTML = doc.data().plate;
  // list.appendChild(plano);

  // To append the the list to querySelector
  document.getElementsByClassName(".numPlate").appendChild(plano);
 }
function ser(){
  n=0;
  var num = document.getElementById("plateNo").value;
  if(num == ""){
    var ent = document.getElementById("plateNo");
    ent.classList.add("invalid");
    document.getElementById("err").setAttribute("data-error", "Wrong");
  }
  else{
    for(i=0;i<2;i++){
        var ans = num.localeCompare(plates[i]); 
        if(ans==0){
          db.collection("details").where('plate', '==', num).get()
            .then(snapshot => {
               if (snapshot.empty) {
                 console.log('No matching documents.');
               return;
                }  
            snapshot.forEach(doc => {
                console.log(doc.id, '=>', doc.data());
          renderHTML(doc);
          });
        })
           .catch(err => {
           console.log('Error getting documents', err);
        });
           n=1;
           window.open("/pages/detail.html","_self");
           break;
        }}
        if(n==0) {
          var element = document.getElementById("plateNo");
          element.classList.add("invalid");
          document.getElementById("err").setAttribute("data-error", "Invalid Entry");
        }
  }}

输入页面的 HTML 代码

<form id="platef" action="/" method="get" target="_self" name="serf" class="col s12 l12">
            <div class="row">
              <div class="input-field col s7 l3 offset-s2 offset-l4 asd">
                <i class="material-icons prefix" id="ic" style="top: 12px;" onclick="ser()" required>search</i>
                <input id="plateNo" class="validate" type="text" name="no" style="text-transform:uppercase" onsubmit="ser()" required>
                <label for="plateNo">Number plate</label>
                <span class="helper-text" data-error="Invalid Entry" id="err"></span>
              </div>
            </div>
          </form>

显示页面的 HTML 代码

<div id="details" class="details container">
<div class="row">
      <div class="col s6 offset-s3 l6 offset-l3">
    <div class="head card-panel">
      <div class="header center-align"><h5 class="numPlate">Database Data</h5></div>
    </div></div></div></div></div>
</div>

更新

我正在从数据库中获取数据并将其显示在 console.log 中，但未显示在网页上。对于设计，我使用 Materializecss。

我有两页，我输入一个数字在数据库中搜索，然后在另一页上显示它（如果有效）。

Answer 1

以 HTML 格式呈现一些 Cloud Firestore 数据：

// To select the element class details
const dat = document.querySelector(".details");


function renderHTML(doc){
 // TODO: do something with the data 

 // To create elements (such as list or span) 
 let list = document.createElement('li');
 let name = document.createElement('span');

 // To set attributes to elements 
 list.setAttribute('id', doc.id);
 name.textContent = doc.data().name;

 // To append element to the list 
 list.appendChild(name);

 // To append the the list to querySelector
 dat.appendChild(list);
}


db.collection("details").where('plate', '==', num).get()
  .then(snapshot => {
    if (snapshot.empty) {
      console.log('No matching documents.');
      return;
    }  
    snapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
      renderHTML(doc);
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });

更多信息请访问documentation