Данные отображаются на HTML после нажатия в любом месте на странице - PullRequest
Новая
       77

Данные отображаются на HTML после нажатия в любом месте на странице

0 голосов
/ 30 марта 2020

Я получаю данные из 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 и после нажатия:

enter image description here

Редактировать 1

Я импортировал ChangeDetectorRef и вызвал его, когда данные загружаются, но проблема остается той же, при первой загрузке, и если Я повторяю sh, пока не нажму куда-нибудь. Вот мой home.ts код: 

export class ViewdailyreportPage implements OnInit {

  lunch = "dal"; daily_report_desc='';
  dinner = "rajma";
  constructor(private firestore: AngularFirestore,public modalController: ModalController,private cd: ChangeDetectorRef) 
  {
      //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);
         this.cd.detectChanges();
        });

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Попробуйте это. 

import { ChangeDetectorRef } from '@angular/core';

constructor( private cd: ChangeDetectorRef ) {}

И когда у вас наконец-то появятся ваши данные. попробуйте позвонить 

this.cd.detectChanges();
0 голосов
/ 30 марта 2020

Это случилось со мной в 2 предыдущих проектах, в первом случае это была проблема со стилем, поэтому окно просмотра не было распознано при загрузке страницы, и ему нужно будет щелкать после загрузки страницы, поэтому оно будет вынуждено автоматически подгоняться, поэтому в этом проекте я воссоздал мой css с хорошим стилем и он заработал.

И в другом проекте это было из-за конфликта в плагине, в просмотре было нормально, но в mobipe была проблема, так как в плагине клавиатуры была ошибка в этой версии поэтому я установил клавиатуру с указанием c версии. В вашем проекте есть несколько предупреждений, что они могут быть проблемами с плагинами, и могут быть проблемами с стилем.

Но так как данные получаются нормально, сейчас это проблема просмотра, поэтому попробуйте прокомментировать ваш html просмотр и добавление любая вещь в нем, как ионная метка с текстом hi и посмотрите, появляется ли она, так как панель инструментов появляется, поэтому у вас есть конфликт в дизайне в ионном содержимом.

Если это так, попробуйте удалить стили и посмотреть, используются ли данные Firestore просмотрено, если они просматриваются, то проблема в css, в противном случае проблема заключается в конфликте в самом плагине Firebase (возможно, ему нужно обновить или перевести версию на более стабильную), посмотрите и расскажите, что происходит с вами.

...