Question

我有一个总是打开的垫日历控件。在初始加载时，我将突出显示一组日期，这些日期可以执行以下操作：Highlighting certain dates in mat-calendar。现在，我必须在单击按钮时突出显示今天（或选定的日期）。仅当我更改为其他月份，然后返回到当前月份的视图时，突出显示才起作用。有没有一种方法可以动态刷新垫日历？请告知。

https://am-all-imports-zwnjbd.stackblitz.io

Answer 1

您可以简单地使用@ViewChild(MatCalendar) calendar: MatCalendar<Date>; someEvent(){ this.calendar.updateTodaysDate(); }重新呈现它。

{{1}}

Answer 2

我使用的是材料7.2，对我来说，移动焦点的工作是更新属性activeDate：

<mat-calendar
    #myCalendar
    [startAt]="startDate"
    [selected]="selectedDate">
</mat-calendar>

<div>
    <button mat-button (click)="addThreeDays()">
        Add 3 days
    </button>
</div>

然后在组件逻辑中

@ViewChild('myCalendar') myCalendar;
startDate = '2019-08-26';
selectedDate = '2019-08-26';

addThreeDays() {
   this.myCalendar.activeDate = '2019-08-29';
}

Answer 3

我还没有找到本机方法。

这是我的解决方法：

将高亮日期数组未定义的条件放入div内的mat-calendar组件

<mat-card *ngIf="datesToHighlight">
  <mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>

当您要刷新Mat-calendar时，请将数组设置为null，然后用更新的数据填充

 this.datesToHighlight = null;
 this.datesToHighlight = getMyNewArray();

这样，组件将再次使用新数组加载

更改突出显示日期的背景后如何刷新mat-calendar

3 个答案: