Question

我正在尝试使用pagenator，排序等为Material DataTable实现DataSource。此处描述了一个实现示例：https://blog.angular-university.io/angular-material-data-table/

从服务中，我得到以下模型：

  export interface IResult {
    results: Flat[];
    currentPage: number;
    pageCount: number;
    pageSize: number;
    length: number;
    firstRowOnPage: number;
    lastRowOnPage: number;
  }

服务中的方法如下：

      getObjects(sort: string, order: string, 
pageNumber = 1, pageSize = 20): Observable<IResult> {
        return this.http.get<IResult>(this.serviceUrl,
          {
            params: new HttpParams()
              .set("sort", sort)
              .set("order", order)
              .set('pageNumber', pageNumber.toString())
              .set('pageSize', pageSize.toString())
          });
      }

数据源实现：

export class OtherDataSource implements DataSource<Flat> {

  private flatSubject = new BehaviorSubject<Flat[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private service: ObjectsService) {

  }

  connect(collectionViewer: CollectionViewer): Observable<Flat[]> {
    return this.flatSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.flatSubject.complete();
    this.loadingSubject.complete();
  }

  loadData(filter = '',
    sortDirection = 'asc', pageIndex = 1, pageSize = 20) {

    this.loadingSubject.next(true);

    this.service.getObjects(filter, sortDirection,
      pageIndex, pageSize).pipe(
        catchError(() => of([])),
        finalize(() => this.loadingSubject.next(false))
      )
    .subscribe(obj => this.flatSubject.next(obj));
  }
}

在subscribe(obj => this.flatSubject.next(obj))中，出现以下错误：IResult is not assignable to type Flat[]。将obj强制转换为<Flat[]>obj时没有错误，我也看到这是后端返回数据，但导致UI为空。我认为这里有subscribe(obj => this.flatSubject.next(<Flat[]>obj))个错误，但不知道如何解决。我在干什么？

我以不同的方式实现了数据源。实现看起来如下：

export class NmarketDataSource extends DataSource<Flat> {
  resultsLength = 0;
  isLoadingResults = true;
  isRateLimitReached = false;
  cache$: Flat[];

  constructor(private nmarketService: ObjectsService,
    private sort: MatSort,
    private paginator: MatPaginator) {
    super();
  }

   connect(): Observable<Flat[]> {
    const displayDataChanges = [
      this.sort.sortChange,
      this.paginator.page
    ];

    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1);


    return merge(...displayDataChanges)
      .pipe(
        startWith(null),
        switchMap(() => {
          return this.nmarketService.getObjects(
            this.sort.active,
            this.sort.direction, 
            this.paginator.pageIndex+1,
            this.paginator.pageSize);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.isRateLimitReached = false;
          this.resultsLength = data.rowCount;
          this.cache$ = data.results;
          return data.results;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          this.isRateLimitReached = true;
          return of([]);
        })
      );

  }
  disconnect() { }
}

它可以工作，但与我的情况不符。

Answer 1

替换此代码

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>

表格末尾

这是错误

如何为数据表实现自定义材料数据源？

1 个答案: