Angular 2 and material.angular.io

Example named "Table retrieving data through HTTP", link .

But I've changed to fetch from the database. The information comes from the database.

Always give this error:

My code

import { Component, ViewChild, OnInit, AfterViewInit  } from '@angular/core';

import { Http } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { Estado } from '../model/estado.model';
import { EstadoService } from './estado.service';

@Component({
  selector: 'app-estado',
  templateUrl: './estado.component.html',
  styleUrls: ['./estado.component.css']
})
  export class EstadoComponent implements OnInit, AfterViewInit  {
    displayedColumns = ['pais', 'descricao', 'sigla'];
    dataSource: MatTableDataSource<Estado>;

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    estados: Estado[];

    constructor(private router: Router, private estadoService : EstadoService) { }

    ngOnInit() {

      this.estadoService.todos().
      subscribe( 
        (data :any) => { 
          this.estados = data.lista;
      });
    }

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

    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); 
      filterValue = filterValue.toLowerCase(); 
      this.dataSource.filter = filterValue;
    }
  }

I put a breakpoint in these instructions:

1st this.dataSource = new MatTableDataSource (); , inside the method: ngAfterViewInit () ngOnInit () method.

When entering the screen it stops at the 1st breakpoint, spoken up and then at the 2nd breakpoint, spoken up. Does the query on the java server, database. It correctly returns the server information.

The problem is that it does not properly paginate the component.

Do not search as in the example.

Follow the images.

Icouldnotevolve.

ComponentHTML

<divclass="example-header">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" 
      placeholder="Pesquisa na tabela de estado">
  </mat-form-field>
</div>

<div class="example-container mat-elevation-z8">

  <mat-table [dataSource]="estados" matSort>

    <ng-container matColumnDef="pais">
      <mat-header-cell *matHeaderCellDef mat-sort-header> País </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.pais.descricao}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="descricao">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Descrição </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.descricao}} </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="sigla">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Abreviação </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.abreviacao}} </mat-cell>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>