5

我有一个总是打开的 mat-calendar 控件。在初始加载时，我突出显示了一组日期，这些日期能够执行以下操作：突出显示 mat-calendar 中的某些日期。现在我必须通过单击按钮突出显示今天（或选定的日期）。突出显示仅在我更改为不同月份时才有效，然后返回当前月份的视图。有没有办法动态刷新 mat-calendar？请指教。

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

4

3 回答 3

11

您可以简单地使用MatCalendar.updateTodaysDate()重新渲染它。

@ViewChild(MatCalendar) calendar: MatCalendar<Date>;

someEvent(){
    this.calendar.updateTodaysDate();
}
于 2019-07-15T14:28:34.990 回答
3

我正在使用材料 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';
}
于 2019-08-26T16:29:50.840 回答
1

我还没有找到本地方法。

这是我的解决方法：

将 mat-calendar 组件放在 div 中，条件是突出显示日期的数组不是未定义的

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

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

于 2019-06-05T17:27:21.090 回答