Angular 2 e componente Table do material angular consultando banco de dados

[guilhermecostalopes]

Ú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 ?

[eduardojmatos]

@guilhermecostalopes vc pode resumir no título a sua dúvida? Isso pra ficar mais fácil pra galera te ajudar :)

[guilhermecostalopes]

@eduardojmatos melhorou o título ?

[eduardojmatos]

Perfeito! Valeu!

[felipefialho]

@guilhermecostalopes Nesse caso acho você deveria usar

  ngOnChanges(changes: SimpleChanges) { 
  }

Para receber essa requisição e testar até ela ser executada.

[tiaguinho]

@guilhermecostalopes Ele executa primeiro o ngOnInit. No entando o valor do AfterViewInit é atribuido primeiro pois não depende de nenhum request.

Se as respostas fossem contrárias como você disse que deveriam ser, nunca haveria nada na tela, pois após o carregamento das informações do ngOnInit o AfterViewInit iria inserir um objeto vazio na table.

Só para esclarecer, o ngOnChanges normalmente é usado quando passamos um valor por um @Input() o que não é o seu caso.

Em teoria está tudo funcionando como deveria. Os itens não são exibidos na tela ou sua duvida era só em relação a ordem de execução?

[felipefialho]

Verdade, não está vindo via @Input(), viajei.

[guilhermecostalopes]

Então @tiaguinho , quando disse primeiro que ele vai no evento AfterViewInit, é porque eu não consegui colocar o breackpoint em outro lugar. Mas realmente ele vai no evento OnInit primeiro e depois vai para o AfterViewInit.

A questão é que ele deveria esperar algo para preencher a variável de retorno do banco ou ter um método para tal funcionalidade.

Sobre isto que perguntou Em teoria está tudo funcionando como deveria. Os itens não são exibidos na tela ou sua duvida era só em relação a ordem de execução?.

R: O que funciona. Faz a consulta no banco no servidor, banco de dados, retorna lista, monta o resultado no componente.

O que não funciona

Paginação do componente, ordenação e pesquisa do componente.

Conseguiu entender ?

Imagem em anexo

[cruzpedro]

@guilhermecostalopes cara, você precisa popular o seu datasource com os dados que estão vindo do banco, quando o seu this.estados estiver preenchido, faça algo do tipo this.datasource = new MatTableDataSource<Estado>(this.estados).

[tiaguinho]

@guilhermecostalopes consegue compartilhar o seu template?

[guilhermecostalopes]

Como assim Tiago ? Grato, Guilherme Costa Lopes Só imprima se existir necessidade. Preserve o meio ambiente CAMPANHA "FIM DO SPAM!" Mande mensagens em CCO e não em PARA ou CC. Divulgue a todos sobre essa prática. Obrigado! ------------------------------------------------------------------- Essa mensagem é destinada exclusivamente ao seu destinatário e contém informações confidenciais, protegidas por sigilo profissional ou cuja divulgação seja proibida por lei. O uso não autorizado de tais informações é proibido e está sujeito às penalidades cabíveis. This message is intended exclusively for its addressee and contain information that is confidential and protected by a professional privilege or whose disclosure is prohibited by law. Unauthorized use of such information is prohibited and subject to applicable penalties. 2018-03-26 12:16 GMT-03:00 Tiago Temporin <[email protected]>:

…

@guilhermecostalopes <https://github.com/guilhermecostalopes> consegue compartilhar o seu template? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/frontendbr/forum/issues/1002#issuecomment-376202626>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXQ9FfrrWKKbYjJv86oIbeJrbKpDUvl6ks5tiQYygaJpZM4S37m1> .

[guilhermecostalopes]

Então @cruzpedro, entendi, mas em qual parte devo colocar ?

Tentei alguns modificações mas não funcionou.

[tiaguinho]

@guilhermecostalopes consegue compartilhar o /estado.component.html???
Pelo que vi nos exemplos do Material, o problema pode estar vinculado com a forma que o template está feito.

[guilhermecostalopes]

Então @tiaguinho , o exemplo deles funciona, sem estar conectando a um banco de dados.

Está é o código

<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 #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true"></mat-paginator>
</div>