视口未显示从ts构造函数接收的数据

Question

我正在使用来自Firestore的where条件在构造函数中接收数据。当我console.log时，我看到我的数组，但它不会反映在viewport home.html上，直到我单击页面上的任何位置或更改浏览器窗口[就像打开其他窗口并返回此窗口]。

我的朋友指导我使用ChangeDetectorRef，我在她的指导下使用它。当所有数据都被提取时，我已经调用了this.cd.detectChanges();——任何我的数组都准备好了，但它不起作用。

以下是我的代码：：

主页.ts

import { Component, OnInit } from "@angular/core";
import * as firebase from "firebase";
import { firestore } from "firebase/app";
import {
AngularFirestoreCollection,
AngularFirestore,
} from "@angular/fire/firestore";
import { ChangeDetectorRef } from "@angular/core";
@Component({
selector: "app-test1",
templateUrl: "./test1.page.html",
styleUrls: ["./test1.page.scss"],
})
export class Test1Page implements OnInit {
dailyreports: any = [];
constructor(
private firestore: AngularFirestore,
private cd: ChangeDetectorRef
) {
let start = new Date("2020-03-29");
firebase
.firestore()
.collection("dailyreport")
.where("timestamp", ">=", start)
.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.id, " ===> ", doc.data());
this.dailyreports.push(doc.data());
});
this.cd.detectChanges();
console.log(this.dailyreports);
});
}
ngOnInit() {}
}

home.html

<ion-content>
<div
class="info col-11"
*ngFor="let list of this.dailyreports; let i = index;"
(click)="openModaWithData(i)"
>
<div id="chtv">
Click here to view what {{list.name}} did.
</div>
<div id="rcorners">
{{list.name}}
</div>
<div id="rcorners2">
{{list.timestamp}}
</div>
<br />
</div>
</ion-content>

Answer 1

您可以根据变量重新分配强制angular刷新(更改检测(。

firebase
.firestore()
.collection("dailyreport")
.where("timestamp", ">=", start)
.onSnapshot((querySnapshot) => {
// Get new items
const newItems = [];
querySnapshot.forEach((doc) => {
console.log(doc.id, " ===> ", doc.data());
newItems.push(doc.data());
});
console.log({ newItems });
// Trigger change detection
this.dailyreports = this.dailyreports.concat(newItems)
});