Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Angular 2

por Guilherme Costa Lopes
| 182.2k xp | 608 posts

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

Sempre dá este erro:

EstadoComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot set property 'paginator' of undefined
    at EstadoComponent.ngAfterViewInit (estado.component.ts:44)
    at callProviderLifecycles (core.js:12706)
    at callElementProvidersLifecycles (core.js:12673)
    at callLifecycleHooksChildrenFirst (core.js:12656)
    at checkAndUpdateView (core.js:13811)
    at callViewAction (core.js:14153)
    at execEmbeddedViewsAction (core.js:14111)
    at checkAndUpdateView (core.js:13803)
    at callViewAction (core.js:14153)
    at execComponentViewsAction (core.js:14085)

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 = ['id', 'name', 'progress', 'color'];
        displayedColumns = ['pais', 'descricao', 'sigla'];
        dataSource: MatTableDataSource<Estado>;

        //dataSource: MatTableDataSource<UserData>;

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

        estados: Estado[];

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

        ngOnInit() {

          this.estadoService.todos().forEach(
          //subscribe( 
            (data :any) => { 
              this.estados = data.lista;
              this.dataSource = new MatTableDataSource(this.estados);
          });
        }

        /**
         * Set the paginator and sort after the view init since this component will
         * be able to query its view for the initialized paginator and sort.
         */
        ngAfterViewInit() {
          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;
        }
      }
3 respostas
por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

coloque a seguinte condição:

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

isso resolvera o erro mas se o (this.dataSource.paginator) precisar ser inicializado inicie com um (else) apos.

espero ter ajudado.

por Guilherme Costa Lopes
| 182.2k xp | 608 posts

Não funcionou.

Pelo que vejo this.paginator, já está inicializado. o problema é que ele busca as informações do banco de dados após renderizar o componente.

solução!
por Guilherme Costa Lopes
| 182.2k xp | 608 posts

Consegui resolver:

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

    import { Pais } from '../modelo/pais.model';
    import { PaisService } from './pais.service';

    import {MatTableDataSource, MatPaginator} from '@angular/material';

    @Component({
      moduleId: module.id,
      selector: 'app-pais',
      templateUrl: './pais.component.html',
      styleUrls: ['./pais.component.css'],
      providers: [PaisService]
    })
    export class PaisComponent implements OnInit {
      displayedColumns = ['descricao'];

      dataSource: MatTableDataSource<Pais>;

      paises: Pais[]; 

      @ViewChild(MatPaginator) paginator: MatPaginator;

      constructor(
          private router: Router, 
          private paisService: PaisService
        ) { }

      ngOnInit(): void {
        this.getPaises();
      }

      getPaises(): void {
        this.paisService.getPaises().subscribe( 
          (data :any) => { 
          this.dataSource = new MatTableDataSource<Pais>(data);
          this.dataSource.paginator = this.paginator;
        });

      }

      alterar(pais: Pais){
        console.log(pais);
        console.log("Alterando país ");
        this.router.navigate(['/pais/alterar/' + pais.id]);
      }
    }