angular - Angular 日历 - 如何使用动态 beforeMonthViewRender

Question

我正在尝试创建一个考勤日历，我必须根据休假类型更改列颜色。

但是在角度日历数据中它不起作用，出勤数据显示为空。

这是我的代码。

请帮忙。

import { AfterViewInit, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { CalendarDateFormatter, CalendarEvent, CalendarMonthViewBeforeRenderEvent, CalendarView } from 'angular-calendar';
import { Subject } from 'rxjs';
import { AttendanceService } from '../services/attendance.service';

@Component({
  selector: 'amt-staff-attendance-statistics',
  templateUrl: './attendance-statistics.component.html',
  styleUrls: ['./attendance-statistics.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})
export class AttendanceStatisticsComponent implements AfterViewInit{
  view: CalendarView = CalendarView.Month;
  Month: Date = new Date();
  events: CalendarEvent[] = [];
  refresh: Subject<any> = new Subject();
  attendace: any;

  constructor(
    public attendanceService: AttendanceService
  ){}

  getAttendace()
  {
    this.attendanceService.getAttendance().pipe().subscribe(res => {
      this.attendace = res;
    }, error =>{
      console.log("error", error.error.message);
    });
  }

  beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
    console.log("attendace" ,this.attendace)
    renderEvent.body.forEach((day) => {
      const dayOfMonth = day.date.getDate();
      if(day.isWeekend)
      {
        day.cssClass = "text-red";
      }

    });
  }

  refreshView(): void {
    this.refresh.next();
  }
  

}

HTML

<div [ngSwitch]="view">
  <mwl-calendar-month-view
     *ngSwitchCase="'month'"
     [viewDate]="m"
     [events]="events"
     [refresh]="refresh"
     (beforeViewRender)="beforeMonthViewRender($event)"
   ></mwl-calendar-month-view>
</div>

谢谢................................................. …………

Answer 1

我已经通过使用刷新功能解决了这个问题，

refreshView(): void {
   this.refresh.next();
}

并在得到 api 响应后调用，

this.refresh.next();