Как обновить мат-календарь после изменения фона выделенных дат

Question

У меня есть элемент управления mat-calendar, который всегда открыт.При начальной загрузке я выделяю массив дат, который смог сделать следующее: Подсветка определенных дат в mat-calendar .Теперь я должен выделить сегодняшний день (или выбранную дату) одним нажатием кнопки.Подсветка работает только тогда, когда я перехожу на другой месяц, а затем возвращаюсь к просмотру текущего месяца.Есть ли способ динамически обновлять мат-календарь?Пожалуйста, сообщите.

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

Answer 1

Вы можете просто использовать MatCalendar.updateTodaysDate() для повторной визуализации.

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

someEvent(){
    this.calendar.updateTodaysDate();
}

Answer 2

я не нашел собственный метод.

вот мой обходной путь:

поместите компонент 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();

Таким образом, компонент снова загрузится с новым массивом.