Question

无法列出html页面上的所有文档。它仅显示第一个文档。如何列出符合条件的所有文档。任何帮助将不胜感激。

我正在通过以下方式获取我的Firestore文档

this.afs.collection('stories', ref => ref.where('userid', '==', this.userId))
      .get().toPromise()
      .then(snapshot => {
        snapshot.forEach(doc => {
          var sTname = doc.data().storyteller;
          var sTitle = doc.data().storytitle;
          var readyFile = doc.data().readyfilepath;
          var rawFile = doc.data().rawfilepath;

          document.getElementById("stname").innerHTML = sTname;
          document.getElementById("stitle").innerHTML = sTitle;
          document.getElementById("readyfile").innerHTML = readyFile;
          document.getElementById("rawfile").innerHTML = rawFile;

        });
      })

      .catch(error => {
        console.log("Error getting stories: ", error);
      });

  }

，现在我想在我正在使用的html页面上显示所有文档

<div class="container">
    <h2>My Stories</h2>
      <table class="table table-striped">
          <thread>
            <tr>
              <th>Story Teller Name</th>
              <th>Story Title</th>
              <th>Ready File</th>
              <th>Raw File </th>
             
              </tr>
          </thread>
          <tbody>
              <tr id="tr">
              <td id="stname"></td>
              <td id="stitle"></td>
              <td id="readyfile"></td>
              <td id="rawfile"></td>
             </tr>
         </tbody>
      </table>

Answer 1

问题是您正在HTML中创建一行，并且正在从脚本中设置列值。这将导致仅显示最后一行。

相反，您应该根据脚本动态创建行。对于每个文档，都有一个新行。有两种选择：

方法1：使用insertRow()获取表对象后，使用insertCell()和document.getElementById('tableId')方法
方法2：为所有行动态准备HTMl，然后设置innerHTML中的tbody
方法3：使用createElement()，createTextNode()创建行，列，文本值，然后使用appendChild()在适当的位置附加元素。

这是上面提到的方法1的运行示例。您也可以尝试其他方式。在示例中，数据被硬编码在数组中。

function populateDataMethod1() {
  var data = [{ "storyteller": "M1:Name 1", "storytitle": "M1:Title 1", "readyFile": "M1:File 1", "rawfile": "M1:File A" },
        { "storyteller": "M1:Name 2", "storytitle": "M1:Title 2", "readyFile": "M1:File 2", "rawfile": "M1:File B" },
        { "storyteller": "M1:Name 3", "storytitle": "M1:Title 3", "readyFile": "M1:File 3", "rawfile": "M1:File C" }]
  var table = document.getElementById("data");
  data.forEach(doc => {
      var row = table.insertRow();
      row.insertCell().innerHTML = doc.storyteller;
      row.insertCell().innerHTML = doc.storytitle;
      row.insertCell().innerHTML = doc.readyFile;
      row.insertCell().innerHTML = doc.rawfile;
  });
  }

function populateDataMethod2() {
  var data = [{ "storyteller": "M2:Name 1", "storytitle": "M2:Title 1", "readyFile": "M2:File 1", "rawfile": "M2:File A" },
        { "storyteller": "M2:Name 2", "storytitle": "M2:Title 2", "readyFile": "M2:File 2", "rawfile": "M2:File B" },
        { "storyteller": "M2:Name 3", "storytitle": "M2:Title 3", "readyFile": "M2:File 3", "rawfile": "M2:File C" }]
  var table = document.getElementById("data-table");
  var dataHtml = "";
  data.forEach(doc => {
      dataHtml += "<tr><td>" + doc.storyteller + "</td><td>" + doc.storytitle + "</td><td>" +
          doc.readyFile + "</td><td>" + doc.rawfile + "</td></tr>";
  });
  document.getElementById("data").innerHTML = dataHtml;
  }

function populateDataMethod3() {
  var data = [{ "storyteller": "M3:Name 1", "storytitle": "M3:Title 1", "readyFile": "M3:File 1", "rawfile": "M3:File A" },
        { "storyteller": "M3:Name 2", "storytitle": "M3:Title 2", "readyFile": "M3:File 2", "rawfile": "M3:File B" },
        { "storyteller": "M3:Name 3", "storytitle": "M3:Title 3", "readyFile": "M3:File 3", "rawfile": "M3:File C" }]
  var table = document.getElementById("data-table");
  data.forEach(doc => {
      var row = document.createElement("tr");
      var column1 = document.createElement("td");
      var column2 = document.createElement("td");
      var column3 = document.createElement("td");
      var column4 = document.createElement("td");
      column1.appendChild(document.createTextNode(doc.storyteller));
      column2.appendChild(document.createTextNode(doc.storytitle));
      column3.appendChild(document.createTextNode(doc.readyFile));
      column4.appendChild(document.createTextNode(doc.rawfile));
      row.appendChild(column1);
      row.appendChild(column2);
      row.appendChild(column3);
      row.appendChild(column4);
      document.getElementById("data").appendChild(row);
  });
  }

<input type="button" value="Populate in Method 1" onclick="populateDataMethod1()" />
<input type="button" value="Populate in Method 2" onclick="populateDataMethod2()" />
<input type="button" value="Populate in Method 3" onclick="populateDataMethod3()" />
<table class="table table-striped" id="data-table">
    <thread>
        <tr>
            <th>Story Teller Name</th>
            <th>Story Title</th>
            <th>Ready File</th>
            <th>Raw File </th>
        </tr>
    </thread>
    <tbody id="data">
    </tbody>
</table>

在角度Webapp页面上显示Firestore文档列表

1 个答案: