angular - 在 Angular webapp 页面上显示 firestore 文档列表
问题描述
无法列出 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>
解决方案
问题是您正在 HTML 中创建单行,并且您正在从脚本中设置列值。这将导致仅显示最后一行。
相反,您应该从脚本动态创建行。对于每个文档一个新行。有几个选项:
- 方法一:使用获取表对象后的使用
insertRow()
和insertCell()
方法document.getElementById('tableId')
innerHTML
方法 2:为所有行动态准备 HTML ,然后设置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>
推荐阅读
- javascript - 覆盖 SVG 图形 - 与 JavaScript 文件相矛盾 (Plotly / Distill.pub)
- neo4j - Neo4j 升级 - https://yum.neo4j.org/stable/repodata/repomd.xml:[Errno 14] HTTPS 错误 503 - 服务不可用
- python - 如何在 Mac 上成功安装 OpenPYXL?
- swift - 编辑 TextField 将 Animated UIView 移动到其原始位置 Swift
- node.js - findOneAndUpdate 不返回原始文档
- windows - 如何获取当前用户组的所有 SID
- javascript - 找不到文件。NodeJS、MySQL、Visual Studio 代码
- java - Lambda 和 Runnable
- blockchain - 在 web3j 中使用 ganache 帐户
- python - python代码中的错误,不知道如何解决?