Как реализовать пользовательский источник данных материала для таблицы данных? - PullRequest
Новая
       35

Как реализовать пользовательский источник данных материала для таблицы данных?

0 голосов
/ 07 декабря 2018

Я пытаюсь реализовать DataSource для DataTable материала с помощью pagenator, сортировки и т. Д. Пример реализации описан здесь: 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, также я вижу, что это возвращаемые данные бэкэнда, но результат в интерфейсе пуст.Я думаю, что ошибка здесь subscribe(obj => this.flatSubject.next(<Flat[]>obj)), но понятия не имею, как это исправить.Что я делаю, вранг?

Я реализовал 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() { }
}

Это работает, но не совпадает в моем случае.

...