Angular 如何在ionic2日历中仅显示一个事件id为的日历？

我正在用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>

---

我找到了ionic2日历的默认代码。 这正是我想要的

{{event.startTime}日期：'HH:mm'}
-
{{event.endTime}日期：'HH:mm'}
{{allDayLabel}
|{{event.title}
{{noeventslab}

我找到了ionic2日历的默认代码。 这正是我想要的

{{event.startTime}日期：'HH:mm'}
-
{{event.endTime}日期：'HH:mm'}
{{allDayLabel}
|{{event.title}
{{noeventslab}

日历组件的外观如何（按代码）？您必须将事件作为输入传递给它，并在那里正确处理它们。您的日历组件看起来如何（代码方面）？您必须将事件作为输入传递给它，并在那里正确处理它们。

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


}

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

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

}