У меня есть мат-календарь, который открыт всегда. При начальной загрузке я выделяю массив дат, который смог сделать следующее: Выделение определенные даты в мат-календаре. Теперь мне нужно выделить сегодняшний день (или выбранную дату) нажатием кнопки. Выделение работает только тогда, когда я перехожу на другой месяц, а затем возвращаюсь к просмотру текущего месяца. Есть ли способ динамически обновлять мат-календарь? Пожалуйста, порекомендуйте.
https://am-all-imports-zwnjbd.stackblitz.io
Вы можете просто использовать MatCalendar.updateTodaysDate() для повторного рендеринга.
@ViewChild(MatCalendar) calendar: MatCalendar<Date>;
someEvent(){
this.calendar.updateTodaysDate();
}
Я использую материал 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';
}
Я не нашел собственного метода.
вот мой обходной путь:
поместите компонент mat-calendar внутри div с условием, что массив дат выделения не является неопределенным
<mat-card *ngIf="datesToHighlight">
<mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>
если вы хотите обновить мат-календарь, установите для массива значение null, а затем заполните его обновленными данными
this.datesToHighlight = null;
this.datesToHighlight = getMyNewArray();
Таким образом, компонент снова загрузится с новым массивом
