How to show DataSource using material table using Angular 8

Question

I am using Angular material table but I didn't faced how to show the dataSource on my screen. Here is the code I am using:

I have evento-table.component.ts requesting data from server:

  dataSource: EventoTableDataSource;

  eventos: Array<any> = new Array();

  constructor(private eventosService: EventosService) { }


  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['pais', 'regiao', 'sensor', 'timestampDt', 'valor', 'status'];

  ngOnInit() {
    this.listarEventos();
    this.dataSource = new EventoTableDataSource();
    console.log('dataSource', this.dataSource);
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }

  listarEventos() {
    this.eventosService.listarEventos().subscribe(eventos => {
      this.dataSource.data = eventos;
      return eventos;
    });
  }
}

And here I don't know how to use the dataSource to show on my view:

evento-table-datasource.ts

// TODO: replace this with real data from your application
const EVENTOS: EventoTableItem[] = [{
  id: 1,
  pais: 'Brasil',
  regiao: 'Sudeste',
  sensor: '001',
  valor: 3000,
  status: 'Processado',
  timestampDt: '2019-06-19T00:00:00Z'
  }];

export class EventoTableDataSource extends DataSource<EventoTableItem> {
  data: EventoTableItem[] = EVENTOS;
  paginator: MatPaginator;
  sort: MatSort;

  constructor() {
    super();
  }

  connect(): Observable<EventoTableItem[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }

  disconnect() {}

  ...
}

And here is how I set my table visualization:

<table mat-table [dataSource]="eventos" class="full-width-table" matSort aria-label="Elements">

Try to put [dataSource]="dataSource" in your html instead of [dataSource]="eventos" — Armen Stepanyan, Feb 22 '20 at 17:54
I had the same result. I am receiving this error on console: ERROR TypeError: Cannot read property 'page' of undefined at EventoTableDataSource.connect (evento-table-datasource.ts:54) — cscord, Feb 22 '20 at 18:24

score 0 · Answer 1 · answered Feb 22 '20 at 18:42

0

When you are running connect, one or all of these variables have no value and are undefined.

data: EventoTableItem[] = EVENTOS;
paginator: MatPaginator;
sort: MatSort;

So that's why it says that connect has an undefined value, because this.paginator.page, isn't initialized.

I will assume that's because you run connect before:

ngAfterViewInit() {


     this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        this.table.dataSource = this.dataSource;
      }

Is there's a specific reason for putting that in the ngAfterViewInit instead of inside ngOnInit() ?

answered Feb 22 '20 at 18:42

Inge Olaisen

69
1
6

I tried this bolilerplate code ng generate @angular/material:material-table --name= your-table-name , so this directive was already filled but I had tried on ngOnInit as well. – cscord Feb 22 '20 at 18:57
Alright, well the problem is because when connect runs this.paginator is undefined, so that's where you can troubleshoot from. It is difficult from here to see where the problem is, because we're missing the code that is actually running connect. – Inge Olaisen Feb 22 '20 at 21:08

How to show DataSource using material table using Angular 8

1 Answers1