我怎样才能在ionic2-calendar中只显示一个带有事件id的日历？

Question

我正在用ionic 4和Angular开发日历应用程序。

我可以从Firebase连接事件和id来删除选定的事件。但是，日历显示了多个。

日历和活动一样多。因为我在日历的标签中使用了ngFor。

像这样

<ion-content padding>
    <calendar [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    [locale]="calendar.locale"
    *ngFor="let dayEvent of (dayEvents | async)"
    [routerLink]="['/day', dayEvent.id]"
    >
</calendar>

请给我任何想法，以显示只有一个日历，可以获得每个事件的id删除。

home.page.ts

import { AngularFirestore } from '@angular/fire/firestore';
import { HomeService, DayEvent } from './home.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();
  calendar = {
    mode: 'month',
    currentDate: new Date(),
    locale: 'ja-JP'
  };
  dayEvent: DayEvent = {
    title: '',
    startTime: this.selectedDate,
    endTime: this.selectedDate,
    allDay: true
  };

  private dayEvents: Observable<DayEvent[]>;
  lockSwipes: boolean;

  constructor(
    private router: Router,
    private homeService: HomeService,
    private db: AngularFirestore,
  ) {
    this.db.collection(`events`).snapshotChanges().subscribe(colSnap => {
      this.eventSource = [];
      colSnap.forEach(snap => {
       const event: any = snap.payload.doc.data();
       event.id = snap.payload.doc.id;
       event.startTime = event.startTime.toDate();
       event.endTime = event.endTime.toDate();
       this.eventSource.push(event);
        });
    });

    }


  ngOnInit() {
    this.dayEvents = this.homeService.getEvents();
  }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }


//Doesn't work...
 onEventSelected = (event) => {
        console.log(event.title);
    };


  onTimeSelected(ev) {
    const selected = new Date(ev.selectedTime);
    console.log(selected);
    this.homeService.selectedDate = selected;
  }

  onCurrentDateChanged(event: Date) {

  }



  today() {
    this.calendar.currentDate = new Date();
  }


}

home.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';

export interface DayEvent {
  id?: string;
  title: string;
  endTime: Date;
  startTime: Date;
  allDay: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  private dayCollection: AngularFirestoreCollection<DayEvent>;
  private dayEvents: Observable<DayEvent[]>;

  eventSource = [];
  selectedDate = new Date();

  constructor(
    private afs: AngularFirestore
  )
  {
    this.dayCollection = this.afs.collection<DayEvent>(`events`);
    this.dayEvents = this.dayCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const event = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...event };
        });
      })
    );
  }

  getEvents(): Observable<DayEvent[]> {
    return this.dayEvents;
}


  getEvent(id: string) {
    return this.dayCollection.doc<DayEvent>(id).valueChanges().pipe(
      take(1),
      map(dayEvent => {
        dayEvent.id = id;
        return dayEvent;
      })
    );
  }

  addNewEvent() {
    const start = this.selectedDate;
    const end = this.selectedDate;
    end.setMinutes(end.getHours() + 1);
    const event = {
       title: 'Your Event ' + start.getMinutes(),
       startTime: start,
       endTime: end,
       allDay: true
    };
    return this.afs.collection(`events`).add(event);
  }

  deleteEvent(id: string): Promise<void> {
    return this.afs.collection(`events`).doc(id).delete();
  }
}

这是用于删除和添加新事件的日期页面。

day.page.ts

import { HomeService, DayEvent } from './../home/home.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastController } from '@ionic/angular';


@Component({
  selector: 'app-day',
  templateUrl: './day.page.html',
  styleUrls: ['./day.page.scss'],
})

export class DayPage implements OnInit {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();

  dayEvent: DayEvent = {
    title: '',
    startTime: this.selectedDate,
    endTime: this.selectedDate,
    allDay: true
  };
  id = null;

  constructor(
    private homeService: HomeService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private toastCtrl: ToastController,
  ) {
  }

  ngOnInit() {
    this.id = this.activatedRoute.snapshot.paramMap.get('id');
  }

  ionViewWillEnter() {
    if (this.id) {
     this.homeService.getEvent(this.id).subscribe(dayEvent => {
        this.dayEvent = dayEvent;
      });
    }
  }


  addNewEvent() {
    this.homeService.addNewEvent().then(() => {
      this.router.navigateByUrl('/');
    });
  }

  deleteEvent() {
    this.homeService.deleteEvent(this.dayEvent.id).then(() => {
      this.router.navigateByUrl('/');
      this.showToast('delete');
    },
      err => {
        this.showToast('There is a some problem.');
      });
  }

  showToast(msg) {
    this.toastCtrl.create({
      message: msg,
      duration: 2000
    }).then(toast => toast.present());
  }

}

Answer 1

我找到了ionic2-calendar的默认代码。TThis正是我想要的东西。

 <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
            <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
                <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)">
                        <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}}
                            -
                            {{event.endTime|date: 'HH:mm'}}
                        </span>
                    <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">{{allDayLabel}}</span>
                    <span class="event-detail">  |  {{event.title}}</span>
                </ion-item>
                <ion-item *ngIf="selectedDate?.events.length==0">
                    <div class="no-events-label">{{noEventsLabel}}</div>
                </ion-item>
            </ion-list>
        </ng-template>