angular - 如何让 Material Calender 的日期选择器过滤器方法与 Observables 一起使用

Question

我在我的项目中使用 Angular Material Date Picker 应用程序，它是一个预订表格。我想要的是用户通过 Date Picker 选择日期。日期选择器将有一个过滤器，显示哪些日期是开放的，哪些不是。为了让日期选择器知道哪些日期可用，它必须调用我的一项服务，该服务返回 Observable 。这是我的日期选择器的 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> 时它将所有日期设置为可用。

我发现了以下post 。是否有可能有一个回调函数，当用户切换月份并运行我的 http 请求并将结果加载到本地变量时调用该回调函数。唯一的问题是，日历必须以某种方式显示加载轮，直到回调函数完成。

Answer 1

如何使 mat-calendar 异步刷新日期过滤器:

解决方案是每当从服务器检索数据时将dateFilter 设置为新值。 Angular 正在其更改检测中检查该值并刷新 View 。

// initial filter function always returns true
dateFilter = (date: Date): boolean => {return true;}

constructor( ... ) {

  this.myDataObs.subscribe( () => {
    // set filter function when new data is available
    this.dateFilter = (date: Date): boolean => { 
      return filterBasedOnDataFromServer(date);
    };
  });
}