angular - 视口不显示从 ts 构造函数接收到的数据
问题描述
我正在使用where
Firestore 的条件在构造函数中接收数据。当我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() {}
}
主页.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>
解决方案
您可以根据变量重新分配强制角度刷新(更改检测)。
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)
});
推荐阅读
- python - 如何在 Odoo 13 CE 中有效地隐藏字段?
- reactjs - 材质ui抽屉位置
- blockchain - Corda 中的 BNO 如何执行 KYC?
- r - 通过 R 运行可执行的 *.exe 文件
- azure-devops - 服务器端的 Azure git 签入策略预接收策略
- node.js - req.get('主机'); 给出一个双域
- vue.js - vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是什么意思以及如何调试?
- javascript - TypeError:this.setState 在 5 秒后不是函数
- ajax - AJAX GET 请求后无法访问模型属性
- node.js - 如何将用户的消息存储为变量?