Блог

Я внедрил календарь в свое ионное приложение, но все еще сталкиваюсь с проблемой: в моем календаре никогда не отображаются события за первый месяц. Для этого мне всегда приходится менять месяц и возвращаться.

Я все еще не вижу той черты, которую мне нужно изменить.

Вот моя страница планирования.страница.ts:

 import { Component, OnInit, ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http';  import { CalendarComponent } from 'ionic2-calendar'; import { AccessProviders } from '../providers/access-providers'; import { ToastController, AlertController, NavController } from '@ionic/angular'; import { Storage } from '@ionic/storage';  @Component({  selector: 'app-planning',  templateUrl: './planning.page.html',  styleUrls: ['./planning.page.scss'], }) export class PlanningPage implements OnInit {  currentDate = new Date();  currentMonth: string;  @ViewChild(CalendarComponent, {static: false}) myCalendar: CalendarComponent;  showAddEvent: boolean;  newEvent = {  title: '',  description: '',  imageURL: '',  startTime: '',  endTime: ''  };  allEvents = [];  minDate = new Date().toISOString();  public events:any;  datastorage: any;  id: Number;  token = null;  constructor(  public http: HttpClient,  private alertCtrl: AlertController,  private accsPrvds: AccessProviders,  private toastCtrl: ToastController,  private storage: Storage,  public navCtrl: NavController,  ){  this.getStorageData();  }     getEvents(){  let body = {   id: "",  token: "",  proces: "get-event"  }  this.accsPrvds.post(body, 'events.php').subscribe((res: any) =gt; {  this.events = res.data;  this.addEvent();  });  }    onViewTitleChanged(title: string) {  this.currentMonth = title;  }    ngOnInit() {  }    addEvent() {   this.events.forEach(event =gt; {  console.log(event);  console.log(event.date_start);  this.allEvents.push({  title: event.nom,  startTime: new Date(event.date_start),  endTime: new Date(event.date_end),   });  })    }    async onEventSelected(event) {  // Use Angular date pipe for conversion  const alert = await this.alertCtrl.create({  header: event.title,  message: 'Du: '   event.startTime   'lt;brgt;lt;brgt;Au: '   event.endTime,  buttons: ['OK'],  });  alert.present();  }   async getStorageData() {  this.storage.get('storage_xxx').then(async (res) =gt; {  if (res == null){  this.navCtrl.navigateRoot('/login');  const toast = await this.toastCtrl.create({  message: 'Veuillez vous connecter pour accéder à cette page.',  duration: 2000,  position: 'top'  });  toast.present();  } else {  this.datastorage = res;  this.id = this.datastorage.id;  this.token = this.datastorage.token;  let body = {  id: this.id,  token: this.token,  }  this.accsPrvds.post(body, 'pageAutorisation.php').subscribe(async(res: any) =gt; {  if(res.message){  this.getEvents();  } else {  this.navCtrl.navigateRoot('/login');  const toast = await this.toastCtrl.create({  message: 'Veuillez vous connecter pour accéder à cette page.',  duration: 2000,  position: 'top'  });  toast.present();  }  });  }  });  }  }   

А вот и html-версия:

 lt;ion-headergt;  lt;ion-toolbargt;  lt;ion-row class="ion-img-center"gt;  lt;img src="https://www.random.fr/ninja/img/logo.png" style="width:30px;height:30px;"gt;  lt;ion-title gt;PLANNING {{ currentMonth }}lt;/ion-titlegt;  lt;/ion-rowgt;  lt;ion-buttons slot="start"gt;  lt;ion-menu-button menu="main-menu"gt;lt;/ion-menu-buttongt;  lt;/ion-buttonsgt;   lt;/ion-toolbargt; lt;/ion-headergt;   lt;ion-contentgt;   lt;calendar   [eventSource]="allEvents"  [currentDate]="currentDate"  (onTitleChanged)="onViewTitleChanged($event)"  (onEventSelected)="onEventSelected($event)"  id="myCalendar"  locale="fr-FR"  calendarMode="month"   startHour="6"  endHour="20"  step="30"  startingDayWeek="1"  format="YYYY-MM-DD"gt;  lt;/calendargt;  lt;/ion-contentgt;   

Извините, что совет конструктора применим к узлу, но, по-видимому, не применим для углового.

1. вызов хранилища выполняется асинхронно. Поэтому, когда вы вызываете его в первый раз, ваша страница отображается до того, как появятся данные. Вот почему события пусты в первый раз. К тому времени, когда вы перейдете вперед и назад, данные будут доступны
2. Итак, что вы хотите сделать, это ВЕРНУТЬ обещание (обратите внимание на возврат, добавленный в getStorageData)
3. Переместите вызов в viewWillEnter. Здесь разрешено выполнять асинхронность в Angular.
4. Добавьте асинхронный тег в функцию viewWillEnter и ждите вызова.

Это заставит lifecycle ждать данных перед первым отображением страницы.

 import { CalendarComponent } from 'ionic2-calendar'; import { AccessProviders } from '../providers/access-providers'; import { ToastController, AlertController, NavController, ViewWillEnter } from '@ionic/angular'; import { Storage } from '@ionic/storage';  @Component({  selector: 'app-planning',  templateUrl: './planning.page.html',  styleUrls: ['./planning.page.scss'], }) export class PlanningPage implements ViewWillEnter {  currentDate = new Date();  currentMonth: string;  @ViewChild(CalendarComponent, {static: false}) myCalendar: CalendarComponent;  showAddEvent: boolean;  newEvent = {  title: '',  description: '',  imageURL: '',  startTime: '',  endTime: ''  };  allEvents = [];  minDate = new Date().toISOString();  public events:any;  datastorage: any;  id: Number;  token = null;  constructor(  public http: HttpClient,  private alertCtrl: AlertController,  private accsPrvds: AccessProviders,  private toastCtrl: ToastController,  private storage: Storage,  public navCtrl: NavController,  ){  }     async ionViewWillEnter(): void {  await this.getStorageData();  }   getEvents(){  let body = {   id: "",  token: "",  proces: "get-event"  }  this.accsPrvds.post(body, 'events.php').subscribe((res: any) =gt; {  this.events = res.data;  this.addEvent();  });  }    onViewTitleChanged(title: string) {  this.currentMonth = title;  }   addEvent() {   this.events.forEach(event =gt; {  console.log(event);  console.log(event.date_start);  this.allEvents.push({  title: event.nom,  startTime: new Date(event.date_start),  endTime: new Date(event.date_end),   });  })    }    async onEventSelected(event) {  // Use Angular date pipe for conversion  const alert = await this.alertCtrl.create({  header: event.title,  message: 'Du: '   event.startTime   'lt;brgt;lt;brgt;Au: '   event.endTime,  buttons: ['OK'],  });  alert.present();  }   async getStorageData(): Promiselt;anygt; {  return this.storage.get('storage_xxx').then(async (res) =gt; {  if (res == null){  this.navCtrl.navigateRoot('/login');  const toast = await this.toastCtrl.create({  message: 'Veuillez vous connecter pour accéder à cette page.',  duration: 2000,  position: 'top'  });  toast.present();  } else {  this.datastorage = res;  this.id = this.datastorage.id;  this.token = this.datastorage.token;  let body = {  id: this.id,  token: this.token,  }  this.accsPrvds.post(body, 'pageAutorisation.php').subscribe(async(res: any) =gt; {  if(res.message){  this.getEvents();  } else {  this.navCtrl.navigateRoot('/login');  const toast = await this.toastCtrl.create({  message: 'Veuillez vous connecter pour accéder à cette page.',  duration: 2000,  position: 'top'  });  toast.present();  }  });  }  });  }  }