Firebase和HTML表之间的实时更新 [英] Realtime Update between Firebase and HTML Table
问题描述
下面的代码显示从firebase到表的数据
Below code displays data from firebase into table
<html>
<head>
</head>
<body >
<table style="width:100%;width:100%;" id="ex-table">
<tr id="tr">
<th>Brand</th>
<th>Description</th>
<th>Item Code</th>
<th>Product Category</th>
</table>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB5aqeEmEIB56IvRt4DL8RyOr0JX5Mw3HQ",
authDomain: "tp-firebase-fd827.firebaseapp.com",
databaseURL: "https://tp-firebase-fd827.firebaseio.com",
projectId: "tp-firebase-fd827",
storageBucket: "tp-firebase-fd827.appspot.com",
messagingSenderId: "191127646247"
};
firebase.initializeApp(config);
var database = firebase.database();
database.ref().once('value', function(snapshot){
if(snapshot.exists()){
var content = '';
snapshot.forEach(function(data){
var val = data.val();
content +='<tr>';
content += '<td>' + val.brand + '</td>';
content += '<td>' + val.description + '</td>';
content += '<td>' + val.item_code + '</td>';
content += '<td>' + val.prod_cat + '</td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>
</body>
</html>
然而，当我改变时它不会自动改变我的firebase中的数据。我如何实现实时更新？这是我唯一需要做的事情。 TYSM用于将来的帮助
However it doesnt change automatically when i change data in my firebase. How can i achieve realtime update? Thats the only thing i need to do. TYSM for future help
推荐答案
您使用了一次方法，该方法一次侦听更改然后停止。你想使用持续监听变化的on方法。例如，而不是：
you used the "once" method that listens for changes once and then stops. you want to use the "on" method that keeps listening for changes. for example, instead of:
database.ref（）。once（'value'，function（snapshot）{
使用：
database.ref（）。on（'value' ，功能（快照）{
相关文档： https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events
这篇关于Firebase和HTML表之间的实时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
