具有 RowCount 和 Results 作为单独字段的 Observable DataTable

Question

我正在尝试改进我的 UI 以使用可观察对象，并在此处关注我的数据表博客：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 属性，这是总计可能的结果 (unpaged/unfiltered)。而实际的Results对象，也就是真正的ItemModel[]。（加上此处无关的其他字段）

这有效的唯一原因是因为它用我的 "Results" 对象返回一个 Observable。但是，我现在丢失了我的 MaxRowCount 对象。

我宁愿不必公开完全不同的 API 端点，只是 returns MaxRowCount。我特别喜欢每当有人排序、过滤或以其他方式刷新 Observable 时，他们都可以使用最新最好的 MaxRowCount。

那么如何通过 DataSource<ItemModel> 中的命令从 ItemService 中的 Observable 获取 MaxRowCount，并进入我的 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);
  });
}

Answer 1

您正在获取结果（这是一个在 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
}

然后在您的 DataSource 中，您可以订阅两次，然后在一个 observable 中获取 MaxRowCount，在第二个中获取行，或者您可以分离您需要的内容并将其保存在组件内的私有状态中

具有 RowCount 和 Results 作为单独字段的 Observable DataTable

Observable DataTable with RowCount and Results as separate fields

angular

angular-material

angular2-observables

angular-datatables