Сортировка Кендо Angular Сетка, связанная объектом состояния редукса

Question

Я использую сетку Kendo Angular, которая связана с данными состояния редукции. Я хочу отсортировать данные сетки на основе выбора столбца пользователя. Я попробовал решение, указанное в https://www.telerik.com/kendo-angular-ui/components/grid/sorting/, но столкнулся с ошибкой, так как не могу преобразовать Observable [] в тип any [].

imports.component. html:

<kendo-grid
        [data]="imports$ |async"

        [sortable]="true"
        [sort]="sort"
          (sortChange)="sortChange($event)"
       >
        <kendo-grid-column field="id" title="Import Id">
        </kendo-grid-column>
        <kendo-grid-column field="baseImportId" title="Based Import Id">
        </kendo-grid-column>
        <kendo-grid-column field="fileName" title="File Name">
        </kendo-grid-column>
        <kendo-grid-column field="importedOn" title="Imported On">
        </kendo-grid-column>
        <kendo-grid-column field="importedByAlias" title="Imported By">
        </kendo-grid-column>
        <kendo-grid-column field="changeSummary" title="Change Summary">
          <ng-template kendoGridCellTemplate let-dataItem>
            <label>  {{dataItem.delta.adds.length}} Adds , {{dataItem.delta.updates.length}} Updates</label>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="Actions" title="Actions">
          <ng-template kendoGridCellTemplate let-dataItem>
            <button (click)="export(dataItem)">Export </button>
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>

imports.component.ts:

export class ImporterComponent implements OnInit {
  public sort: SortDescriptor[] = [{
    field: 'fileName',
    dir: 'asc'
  }];

  @select(['imports', 'state']) readonly imports$: Observable<IKBImport[]>;

  public gridView: GridDataResult;  //Observable<IKBImport[]> = this.imports$;
  public products: any[] = this.imports$; **Failing here**

  constructor(private fb: FormBuilder,
    private router: Router,
    private store: NgRedux<IAppState>,
    private renderer: Renderer2,
    private app_Service: APP_Service,
    private importer_Actions: Importer_Actions,
    private importer_Service: Importer_Service,
    private viewContainerRef: ViewContainerRef,
    public _datepipe: DatePipe
  ) {
    this._DatePipe = _datepipe;
  }

  ngOnInit(): void {
    this.importer_Actions.getAllKBs();
  }

  public refresh() {
    this.importer_Actions.getAllKBs();
  }

  public export(record: IKBImport) {
    this.importer_Actions.export(record);
  }

    public Busy(): void {

    }

    public Free(): void {

  }

  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
    this.loadProducts();
  }

  private loadProducts(): void {
    this.gridView = {
      data: orderBy(this.imports$, this.sort), **Failing here**
      total: this.imports$.length; **Failing here, how to get the length property**
};

    public ngOnDestroy(): void {
    }

    loading(result): void {
        if (result) {
            this.Busy();
        }
        else {
            this.Free();
        }
    }
}

Кроме этого, у меня есть действия, эпосы , сервисы и редукторы для кода.

importer.service.ts

@Injectable()
export class Importer_Service {
  private baseUrl = 'api/Import';

  constructor(private http: HttpClient) { }

  public getKBImports(): Observable<IKBImport[]> {

    let headers = new HttpHeaders({ 'Accept': 'application/json', 'Content-Type': 'application/json' });

    return this.http.get<IKBImport[]>(this.baseUrl, { headers: headers }).pipe(
      map(resp => {
        return JSON.parse(JSON.stringify(resp));
      }),
      catchError(this.handleError));
  }
}

importer.reducer.ts

export const IMPORTS_INITIAL_STATE: ClientState<IKBImport[]> = {
  state: [], error: '', loading: false};
export const imports: Reducer<ClientState<IKBImport[]>> = (state: ClientState<IKBImport[]> = IMPORTS_INITIAL_STATE, action: Importer_Action_Type): ClientState<IKBImport[]> => {
  switch (action.type) {
    case Importer_ActionTypes_Enum.IMPORT_GET_ALL_STARTED:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case Importer_ActionTypes_Enum.IMPORT_GET_ALL_SUCCEEDED:
      return {
        ...state,
        state: <IKBImport[]>action.payload,
        loading: false,
        error: null,
      };
    case Importer_ActionTypes_Enum.IMPORT_GET_ALL_FAILED:
      let errorMessage: string = "Error occured while getting change requests. Please try again...";
      return {
        ...state,
        state: [],
        loading: false,
        error: errorMessage,
      };

    default: return state;

  }
}

importer.epics.ts

@Injectable()
export class Importer_Epics {

  constructor(private importer_service: Importer_Service, private importer_action: Importer_Actions, private appaction: APP_Actions, private _router: Router) { }


  getImports_Epic: Epic<Importer_Action_Type, Importer_Action_Type, IAppState> = (action$, store) => action$.pipe(
    ofType(Importer_ActionTypes_Enum.IMPORT_GET_ALL),
    switchMap(action => this.importer_service.getKBImports().pipe(
      map((data: IKBImport[]) => this.importer_action.getAllKBs_Suceeded(data)),
      catchError(response => of(this.importer_action.getAllKBs_Failed({
        status: (response ? response.status : 'Server error'),
        message: response.message
      })
      ))
    )),
    startWith(this.importer_action.getAllKBs_Started()));

importer.actions.ts:

@Injectable()
export class Importer_Actions {

  @dispatch()
  getAllKBs = (): FSAction => ({ //future user param
    type: Importer_ActionTypes_Enum.IMPORT_GET_ALL,
    meta: null,
    payload: null,
  });
  getAllKBs_Started = (): FSAction => ({ //future user param
    type: Importer_ActionTypes_Enum.IMPORT_GET_ALL_STARTED,
    meta: null,
    payload: null,
  });
  getAllKBs_Suceeded = (payload: IKBImport[]): FSAction => ({ //future user param
    type: Importer_ActionTypes_Enum.IMPORT_GET_ALL_SUCCEEDED,
    meta: null,
    payload: payload,
  });
  getAllKBs_Failed = (error: any): FSAction => ({ //future user param
    type: Importer_ActionTypes_Enum.IMPORT_GET_ALL_FAILED,
    meta: null,
    payload: error,
  });
}

Может кто-нибудь помочь мне с вышеуказанной ошибкой или объяснить, может ли сортировка быть реализована любым другим способом. Спасибо !!!