Как правильно работать с datatable от Angular Material?

Question

[Ivan Stroykin]

Доброго времени суток,

Кто уже опробовал datatable от angular material? Я хоть и посидел за ним немного, нашел хороший плюс, который заключается в том, что можно просто описать все колонки, а потом в просто вызвать только те, которые нужно и в любом порядке. Из минусов то, что не могу просто заставить это работать. Вечно получаю ошибку:
this.dataSource.connect is not a function
Суть в том, что данные приходят с backend в формате json (в примере данные, конечно же, "захардкожены")
Пример на Plunker

Answer 1

[Алексей Зуев]

Таблица не совсем простая получается, мы обязаны передавать dataSource как объект типа DataSource из @angular/cdk

/**
   * Provides a stream containing the latest data array to render. Influenced by the table's
   * stream of view window (what rows are currently on screen).
   */
  @Input()
  get dataSource(): DataSource<T> { return this._dataSource; }

Вот вам следующий шаг

import { DataSource } from '@angular/cdk'
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/of'

export class MyDataSource extends DataSource<any> {
  connect(): Observable<any[]> {
    return Observable.of([
      {id: 1, title: 'Test 1'},
      {id: 2, title: 'Test 2'},
      {id: 3, title: 'Test 3'},
    ]);
  }

  disconnect() {}
}


public dataSource: DataSource = new MyDataSource();

https://plnkr.co/edit/I5gnn3XzosabC8lQCrEo?p=preview

Это как бы подталкивает нас не забрасывать изучать rxjs и познавать всю его силу. Далее идите в примеры на сайте https://material.angular.io/components/table/examples, там более продвинутая версия connect метода, где используется merge оператор

Comments

[Ivan Stroykin]

Что-то многовато кода получается + 2 компонента, чтобы сделать простую табличку :)

[Алексей Зуев]

Иван Стройкин: Есть немножко, но нас никто не заставляет использовать эту таблицу, можно свою сделать)

[Ivan Stroykin]

Алексей Зуев: ох, думаю на свою очень много времени понадобится ) Ведь нужны сортировки, фильтры (хотя тут пока фильтров тоже нету, только общий), пагинация. Хотя я бы попробовал сделать. Мне понравилось как они реализовали описание колонок. Если есть колонки которые доступны, к примеру, пользователям с определенной ролью, то не нужно подставлять ngIf, или тот самый *hasRole. Можно просто описать спокойно колонки, а потом подставить массив с наименованиями колонок в зависимости от роли. Это мне очень понравилось :)

[Алексей Зуев]

Иван Стройкин: Я думаю, чем больше вы будете вникать в эту таблицу, тем больше она вам будет нравится

[Ivan Stroykin]

Алексей Зуев: мне пока что не нравится лишний компонент )

[Алексей Зуев]

Иван Стройкин: MyDataSource?

[Ivan Stroykin]

Алексей Зуев: именно ) ну...и отсутствие фильтров по колонкам. Но это, вроде как, в разработке уже

[Алексей Зуев]

Иван Стройкин: Это не компонент, это классик)

[Ivan Stroykin]

Алексей Зуев: ой, да) это называется "заработался") лишний класс не нравится и отсутствие фильтров. Все остальное хорошо :)