单击页面上的任意位置后，数据将显示在HTML上

Question

我正在从Firestore提取数据，并在ngOnInit()中添加了所需的代码。问题是当我执行ionic serve时，我的home.html保持空白，但是我可以在console.log中看到数据。

数据仅在我单击页面上的某个位置后出现。为什么会发生？

这里是我的home.ts

 ...
export class ViewdailyreportPage implements OnInit {

  constructor(private firestore: AngularFirestore) { }

  dailyreports:any = [];
  ngOnInit() {

//where condition with timestamp
let start = new Date('2020-03-29');
let end = new Date('2018-01-01');
firebase.firestore().collection("dailyreport").where("timestamp", ">=", start)
    .onSnapshot(querySnapshot => {
        var cities = [];
        querySnapshot.forEach( doc=> {
  const timeinmillsecs = doc.data().timestamp.seconds * 1000; //1. get timestamp and make it in milli
  let a1 = new Date(timeinmillsecs); // 3. convert to simple date
  let show_year_month_date =  a1.getFullYear()+'/'+(a1.getMonth()+1) +'/'+a1.getDate(); // 3.convert to imple date
         const data = doc.data();
         data.timestamp = show_year_month_date;
         this.dailyreports.push(data);
         console.log(this.dailyreports);
        });
    });
  }
}

home.html

<ion-content>
  <!--<div class="info col-11"  [innerHtml]="list.dr_describe | safe: 'html'">{{list.q_describe}}</div>-->

  <div  class="info col-11" *ngFor="let list of this.dailyreports">

    <div id="chtv">
      Click here to view what {{list.name}} did.
    </div>

    <br/>
    <span [innerHtml]="list.desc | safe: 'html'">{{list.desc}}</span>
  </div>
</ion-content>

ionic serve上的屏幕截图，然后单击：

Answer 1

[这在我之前的2个项目中都发生过，在第一个项目中是样式问题，因此页面加载时视图无法识别视口，页面加载后将需要单击，因此被迫自动安装，因此在此项目中我重新创建了我的css具有良好的样式，并且可以正常工作，并且在另一个项目中是因为插件冲突，浏览正常，但是在mobipe中出现了问题，因为该版本的键盘插件存在错误，因此我安装了特定版本的键盘。在您的项目中，有一些警告可能是插件问题，也可能是样式问题。.但是由于数据正常获取，因此它的视图问题暂时存在，因此请尝试注释HTML视图并在其中添加任何内容，例如ionlabel带有文本hi并查看它是否出现，因为出现了工具栏，所以您在设计离子含量上存在冲突，如果这样，请尝试删除样式并查看是否正在查看Firestore数据，如果已查看，则在CSS中出现问题，否则问题是firrbase插件本身发生冲突（可能需要升级或降级到一个稳定的版本）才能看到并告诉您发生了什么。