Angular 2

[Guilherme Lopes]

Último exemplo, https://material.angular.io/components/table/examples. Mas mudei para buscar da base de dados. As informações vem do banco de dados.

Meu código

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

    import { Http } from '@angular/http';

    import { Router } from '@angular/router';

    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 {

        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;

              this.dataSource = new MatTableDataSource(this.estados);

          });

        }

      

        ngAfterViewInit() {

          this.dataSouce = new MatTableDataSource();

          this.dataSource.paginator = this.paginator;

          this.dataSource.sort = this.sort;

        }

      

        applyFilter(filterValue: string) {

          filterValue = filterValue.trim(); // Remove whitespace

          filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches

          this.dataSource.filter = filterValue;

        }

      }

Quando entro na página, ele ainda não carregou a informação no banco de dados e por isto não tem resultado neste momento, conforme imagem.

Primeiro ele carrega o componente MatTableDataSource no metodo ngAfterViewInit(). depois ele consulta a base de dados no método ngOnInit. Deveria ser ao contrário.

O que pode ser ?