如何实现数据表的自定义材质数据源？

Question

我想为Material DataTable实现DataSource，并提供pagenator，排序等功能，这里介绍一个实现的例子。https:/blog.angular-university.ioangular-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())
          });
      }

DataSource实现：

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)) 但不知道如何修复。我在做什么wrang？

我用不同的方式实现了一个DataSource。实现方式如下。

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>

表末

这是错误的