Как заставить метод фильтра выбора даты в календаре материала работать с наблюдаемыми

Я использую приложение Angular Material Date Picker в своем проекте, который является формой бронирования. Я хочу, чтобы пользователь выбирал дату с помощью средства выбора даты. Выбор даты будет иметь фильтр, который покажет, какие даты открыты, а какие нет. Чтобы сборщик дат знал, какие даты доступны, он должен позвонить в одну из моих служб, которая возвращает наблюдаемую информацию . Вот мой HTML-код для выбора даты:

<mat-form-field>
  <label>
    <input matInput [matDatepickerFilter]="dateFilter" required [matDatepicker]="picker" placeholder="Choose a date"
           formControlName="date">
  </label>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

и dateFilter ():

dateFilter = (d: Date): boolean => {
    if(monthIsSame(d) {
        ..// have a return statement that process a global variable: 'month: Day[]'
    } else {
        // the user hit the arrow at the top that switches months
        //
        // have a process that sets the 'month' variable to a new array of Days that was gotten 
        // through a RESTful api in one of my services.
        // Somehow there must be a loading wheel here until the result from my server comes back and
        // month is set to the new current month, and then a return statement that process a month
    }
};

Проблема заключается в том, что каждый раз, когда пользователь переключает месяцы, календарь должен загружать доступность месяца с заднего сервера, но код с сервера возвращает Observable. Каким-то образом в календаре должно отображаться колесо загрузки, пока значение не возвращается из метода подписки наблюдаемого, и календарь будет заполнен доступными датами.

Любая помощь очень ценится, и если я приду к этому совершенно неправильным способом, пожалуйста, скажите мне. Благодарность!


Примечание: когда я изменяю тип возвращаемого значения моего фильтра на Observable<boolean> он устанавливает все доступные даты.

Когда я попробовал решение @dev, функция эмиттера срабатывает только тогда, когда пользователь переключает месяцы через выпадающую кнопку выбранного месяца в верхнем левом углу палитры, но когда пользователь переключает месяцы с помощью клавиш со стрелками, эмиттер не ' Я не могу обновить переменную month .

Всего 1 ответ


Я не уверен в части колеса загрузки (может быть, поставить флажок на компонент и установить его внутри трубы до и после вашего сервисного вызова?)

Но с точки зрения проблемы возврата Observable, я думаю, что ваша проблема может быть решена с помощью async канала:

[matDatepickerFilter]="dateFilter | async"

Это будет автоматически обрабатывать подписку и отписку. Просто убедитесь, что вы вставили shareReplay(1) после вызова API, иначе вызов API будет срабатывать при каждом цикле обнаружения изменений (что может быть довольно часто).


Есть идеи?

10000