Whenever I update a record, it ends up appearing twice on the screen.
This is how I am loading it:
ngOnInit() {
this.loadItems();
}
loadItems(){
this.first_time_enter = true;
console.log(this.first_time_enter);
this.tableData = [];
let query3 = firebase.firestore().collection('complaints').where('complaint_status', '==', "Open")
query3
.orderBy("complaint_date","desc").limit(2)
.onSnapshot(querySnapshot=> {
querySnapshot.forEach(doc=> {
var data = Object.assign(doc.data(), {docid : doc.id}, {duration: duration})
this.tableData.push(data);
console.log(this.tableData);
});
}
The content from this.tableData array is displayed on the html page.
Upon page load, I can see 2 entries and if there is an update made through the Firebase console, they increase to 4. How can I handle this situation? I suspect that this.tableData.push(data); might be causing this issue, even though I clear the array using this.tableData = [] before the query, which doesn't seem to resolve the problem.
Please refer to the images below for better understanding: