Блог

Я пытаюсь усовершенствовать свой пользовательский интерфейс для использования наблюдаемых и следил за блогом здесь для моих таблиц данных: https://blog.angular-university.io/angular-material-data-table /

В итоге я получил что-то вроде этого в моем ItemService

 queryItems(filter = '', sortCol = 'Name', sortDirection = 'asc', pageNumber = 0, pageSize = 3):  Observable<ItemModel[]> {
    return this.http.get('http://localhost:31150/api/item/query', {
        params: new HttpParams()
            .set('search', filter)
            .set('orderBy', sortCol)
            // etc...
    }).pipe(
        map(res => res["Results"])
    );
}
 

Мой фактический res результат — это объект с большим количеством деталей. Две такие детали являются MaxRowCount свойством, которое представляет собой ОБЩИЕ возможные результаты (не загруженные / нефильтрованные). И фактический Results объект, который является истинным ItemModel[] . (Плюс другие поля здесь неуместны)

Единственная причина, по которой это работает, заключается в том, что он возвращает наблюдаемое с моим "Results" объектом. Однако теперь мне не хватает моего MaxRowCount объекта.

Я бы предпочел не предоставлять совершенно другую конечную точку API, которая просто возвращает MaxRowCount. Мне особенно нравится, что всякий раз, когда человек сортирует, фильтрует или иным образом обновляет Observable , ему доступен последний и наибольший MaxRowCount.

Итак, как мне получить это MaxRowCount из Observable in my ItemService , через команду в my DataSource<ItemModel> и в my Item Component ?

Мой источник данных:

 queryItems(filter = '', sortCol = 'Name', sortDirection = 'asc', pageIndex = 0, pageSize = 3) {
  this.loadingSubject.next(true);

  this.itemService.queryItems(filter, sortCol, sortDirection, pageIndex, pageSize).pipe(
      catchError(() => of([])),
      finalize(() => this.loadingSubject.next(false))
  )
  .subscribe(items => {
    this.itemSubject.next(items);
  });
}
 

Вы берете свой результат (который представляет собой объект, в котором есть оба ваших результата, Results MaxRowCount и вы сопоставляете его с массивом, состоящим только из объектов ItemModel. Вы можете сопоставить (в ItemService ) с объектом, который содержит оба:

 queryItems(filter = '', sortCol = 'Name', sortDirection = 'asc', pageNumber = 0, pageSize = 3):  Observable<QueryResult> {
    return this.http.get('http://localhost:31150/api/item/query', {
        params: new HttpParams()
            .set('search', filter)
            .set('orderBy', sortCol)
            // etc...
    }).pipe(
        map(res => ({ 
          rows: res["Results"],
          maxRowCount: res["MaxRowCount"] }))
    );
}

export interface QueryResult {
  rows: ItemModel[],
  maxRowCount: number
}
 

и затем в вашем источнике данных вы можете либо подписаться дважды, а затем получить MaxRowCount в одном наблюдаемом и строки во втором, или вы можете отделить то, что вам нужно, и сохранить его в частном состоянии внутри компонента