Angular 2 and material.angular.io

Question

Example with the name "Table retrieving data through HTTP", https://material.angular.io/components/table/examples.

But I switched to search the database. The information comes from the database.

There’s always this mistake:

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:

first) this.datasource = new Mattabledatasource();, within the method: ngAfterViewInit() 2nd) this.states = date.list;, within the method ngOnInit().

When entering the screen it stops at the 1st breakpoint, spoken above and then at the 2nd breakpoint, spoken above. Do the query in the java server, database. Correctly returns server information.

The problem is that it does not make the correct component pagination.

Does not search as shown in the example.

Follow the images.

I couldn’t evolve.

HTML of the component

<div class="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>