日歷不更新角度離子

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();
          }
        });
      }
    });
  }

}