日历不更新角度离子

Question

我已经在我的 ionic 应用程序上实现了一个日历，但我仍然遇到一个问题：我的日历从不显示第一个月的事件。 为此，我总是不得不更改月份并返回。

我仍然没有看到我必须改变的路线。

这是我的planning.page.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) => {
      this.events = res.data;
      this.addEvent();
    });
  }


  onViewTitleChanged(title: string) {
    this.currentMonth = title;
  }


  ngOnInit() {
  }


  addEvent() {

    this.events.forEach(event => {
      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 + '<br><br>Au: ' + event.endTime,
      buttons: ['OK'],
    });
    alert.present();
  }

  async getStorageData() {
    this.storage.get('storage_xxx').then(async (res) => {
      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) => {
          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 之一：

<ion-header>
  <ion-toolbar>
   <ion-row class="ion-img-center">
        <img  src="https://www.random.fr/ninja/img/logo.png" style="width:30px;height:30px;">
        <ion-title >PLANNING {{ currentMonth }}</ion-title>
    </ion-row>
  <ion-buttons  slot="start">
    <ion-menu-button menu="main-menu"></ion-menu-button>
  </ion-buttons>

  </ion-toolbar>
</ion-header>


<ion-content>

    <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">
    </calendar>

</ion-content>

Answer 1

抱歉，构造函数建议适用于 Node，但显然对 angular 无效。

1. 对存储的调用是异步的。 因此，当您第一次调用它时，页面会在有数据之前呈现。 这就是事件第一次为空的原因。 当你前进和后退时，数据是可用的

2. 所以你想要做的是返回承诺（注意添加到 getStorageData 的返回）

3. 将调用移至 viewWillEnter。 这里允许在 Angular 中进行异步操作。

4. 将 async 标签添加到 viewWillEnter 函数并等待调用。

这将强制生命周期在第一次绘制页面之前等待数据。

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) => {
      this.events = res.data;
      this.addEvent();
    });
  }


  onViewTitleChanged(title: string) {
    this.currentMonth = title;
  }

  addEvent() {

    this.events.forEach(event => {
      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 + '<br><br>Au: ' + event.endTime,
      buttons: ['OK'],
    });
    alert.present();
  }

  async getStorageData(): Promise<any> {
    return this.storage.get('storage_xxx').then(async (res) => {
      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) => {
          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();
          }
        });
      }
    });
  }

}