繁体   English   中英

日历不更新角度离子

Calendar not updating angular Ionic

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我已经在我的 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>

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

}
2 在离子3和角度5中使用日历

我找到了这个https://devdactic.com/ionic-calendar-angular-calendar/ ,它可以帮助你在ionic3中实现日历。 我按照每一步,但当我import CalendarModule.forRoot() ,出现此错误: calendar ...

3 无法将角度日历集成到离子应用程序中

嗨,我正在尝试在离子应用程序中使用以下日历 https://github.com/mattlewis92/angular-bootstrap-calendar 我的HTML 我的控制器 我可以看到在创建“测试器”时控制器在页面上被击中,并且呈现良好,但是对于日历,这就 ...

4 离子 - 如何延迟角度范围滑块更新

我在我的应用程序中使用范围滑块,它工作正常,但问题是代码向服务器发送了大量范围滑块值。它导致一些滞后。我想设计它,以便它可以发送用户删除时唯一的最后一个值他的手指来自滚动条。这可能吗? 如果是这样,我应该从我的代码中更改什么? 提前感谢。这是我的代码:Html部分 这是控制器部分: ...

5 离子+ Angular

请帮忙, 我试图修复它但没有成功。 我正在使用 Ionic 框架和 Angular。 我有一个表单,当我单击 Sidemenu 时会打开它。 所以问题是当我在输入字段上添加一个 formControllerName 时,它修改了我的设计表单。 我不明白为什么这些输入会改变我的表单。 我在我需要的模 ...

7 离子框架日历

我是AngularJS和Ionic Framework的新手,我现在的项目是为移动应用程序开发和集成日历事件应用程序。 我已经有了UI,只有集成是实现此目标的问题。 你们是否有任何有关此操作的链接或教程? 提前致谢! ...

8 离子本机日历

我正在使用离子本机日历显示事件。 在LG中,三星手机的Android版本5.1.1及以上版本无法正确加载。 但是事件会加载到浏览器中。 在这里我也附上了图片。 我正在通过ajax post方法从PHP服务器检索数据。 您能帮我解决这个问题吗? calendar.ts中的事件加 ...

9 日历控件的离子?

我设法找到了几个离子日历模块,但是找不到用户可以从可用日期中选择的任何日历控制模块。 那里有东西吗? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM