0

Olá, estou iniciando em angular e gostaria de mostrar o resultado de uma pesquisa que está vindo de uma api que construi usando springboot. minha response esta vindo assim:

{,…}
content: [{id: 33, dsProjeto: "teste", nomeProjeto: "nometeste", setor: "Insurance",…},…]
0: {id: 33, dsProjeto: "teste2", nomeProjeto: "nometeste2", setor: "Insurance",…}
1: {id: 36, dsProjeto: "teste3", nomeProjeto: "nometeste3",…}
2: {id: 37, dsProjeto: "teste4", nomeProjeto: "nometeste4",…}
3: {id: 38, dsProjeto: "teste5", nomeProjeto: "nometeste5", setor: "Industry",…}
empty: false
first: true
last: true
number: 0
numberOfElements: 4
pageable: "INSTANCE"
size: 0
sort: {sorted: false, unsorted: true, empty: true}
totalElements: 4
totalPages: 1

A api tá retornando uma Page, o problema é que preciso mostrar isso no front e não sei direito como faz. Segui alguns tutorias, mas não está funcionando. Aparece o seguinte erro no console: Cannot read property 'content' of undefined. E realmente, quando dou um console.log em data no onInit do atestado.component, apos o subscribe, data aparece como undefined. Porém, como disse acima o meu serviço tá retornando o response certo. Na aba network do crome, o response vem certinho. Alguém poderia me ajudar? Seguem meus códigos do angular:

atestado.component.html:

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Id Column -->
<ng-container matColumnDef="id">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>

<ng-container matColumnDef="dsProjeto">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> DsProjeto </th>
  <td mat-cell *matCellDef="let element"> {{element.dsProjeto}} </td>
</ng-container>

<ng-container matColumnDef="nomeGerente">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Nome Gerente </th>
  <td mat-cell *matCellDef="let element"> {{element.nomeGerente}} </td>
</ng-container>

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

atestado.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { ProjetoService } from 'src/app/shared/services/projeto.service';
import { Atestado, Page } from './atestado';

@Component({
   selector: 'app-atestado',
   templateUrl: './atestado.component.html',
   styleUrls: ['./atestado.component.scss']
 })
 export class AtestadoComponent implements OnInit {

 dataSource: MatTableDataSource<Atestado>;
 displayedColumns= ['id', 'dsProjeto', 'nomeGerente'];
 page: Page;

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

 constructor(private projetoService: ProjetoService) {}

 ngOnInit(): void {
    this.projetoService.buscaAtestados('java',1,'id','ASC')
    .subscribe(
        data  => {
            console.log(data);
            this.page = data;
            const atestados = data.content;
            this.dataSource = new MatTableDataSource<Atestado>(atestados);
        });
 }
}

projeto.service.ts:

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";
import { mappingUrls } from src/app/shared/commons/constants/constants.service';
import { environment } from '../../../environments/environment';
import { GenericService } from './generic.service';

@Injectable({
  providedIn: 'root'
})
export class ProjetoService {
   private applicationUrl = 'http://' + environment.host + ':' + environment.port + '/api/';

 constructor(private httpClient: HttpClient, private genericService: GenericService) {}

 public buscaAtestados(filtro,page,size): Observable<Page> {

return  this.httpClient.get<Atestado>(this.applicationUrl + mappingUrls.projetoService.buscaAtestados, { 
    params: new  HttpParams ()
        .set('filtro',filtro)
        .set('page',page.toString())
        .set('size',size.toString())
}).pipe(
        map(res =>  res["payload"])
    );
}

a interface atestado.ts

export interface Page {
  content: Atestado[];
  pageable: string;
  totalElements: number;
  last: boolean;
  totalPages: number;
  size: number;
  number: number;
  sort: Sort;
  numberOfElements: number;
  first: boolean;
  empty: boolean;
}

export interface Sort {
  sorted: boolean;
  unsorted: boolean;
  empty: boolean;
}

export interface Atestado {
  id: string;
  dsProjeto: string;
  setor: string;
  un: string;
  dtInicio: string;
  //codigo omitido
}

Agradeço a ajuda!

2 Respostas 2

1

Consegui resolver, como estou devolvendo um Page da minha Api, o observable tinha que ser do tipo Page .. O erro estava no meu serviço. Segue código corrigido:

 public buscaAtestados( 
            filtro: string,
            page: number,
            ord:string,
            dir:string): Observable<Page> {

    return  this.httpClient
    .get<Page>(this.applicationUrl + mappingUrls.projetoService.buscaAtestados, { 
    params: new  HttpParams ()
        .set('filtro',filtro)
        .set('pag',page.toString())
        .set('ord',ord)
        .set('dir', dir)
    }).pipe(
        map(res => {
            return res;
        })
    );
}
0

As linhas que você quer mostrar estão no content do objeto da resposta. Você precisa ler isso da forma correta. Sugiro que você crie uma classe a partir do JSON da resposta, do JSON todo, pois você vai precisar disso depois para fazer a paginação. Este artigo que você usou é uma ótima referência.

Para criar o JSON, se estiver usando o VSCode, use o plugin JSONToTS JSONToTS. Então no GET, faça o retorno tipado:

public buscaAtestados(filtro,page,size): Observable<any[]> {

return  this.httpClient.get<IResult>(this.applicationUrl + mappingUrls.projetoService.buscaAtestados, { 
    params: new  HttpParams ()
        .set('filtro',filtro)
        .set('page',page.toString())
        .set('size',size.toString())
}).pipe(
        map(res =>  res["payload"])
    );
}

Na sua dataSource, pegue apenas o content para os dados:

this.projetoService.buscaAtestados(filter, pageIndex, pageSize).pipe(
        catchError(() => of([])),
        finalize(() => this.loadingSubject.next(false))
    )
    .subscribe( (atestados: IResult) => this.atestadoSubject.next(atestados.content));

EDITADA

Sua classe como JSON ficaria assim: inserir a descrição da imagem aqui

3
  • oi, obrigada pela resposta! Não sei se entendi bem o que vc quis dizer sobre criar uma classe a partir do json. Eu não estou usando vscode... mas, pelo o que entendi, seria pra eu criar uma classe com os atributos qu evem no meu json? Bem, foi isso que eu fiz, e postei as alterações, criei uma interface atestado.ts. Porém, no meu datasource, na parte de pegar o content, ele não reconhece o .content como um metodo e nem chega a compilar. Desculpa se entendi errado o que vc quis dizer.
    – oitathi
    Commented 23/07/2019 às 13:48
  • Sua interface ficou incompleta, adicionei um print de como ficaria a partir do JSON que você forneceu na sua pergunta. Observe que ela tem a propriedade Content, um array, que eu entendi como sendo os dados que você quer exibir no data-table. Commented 23/07/2019 às 15:14
  • Olá! Obrigada pela ajuda de novo! dei uma modificada na minha interface. usei a versão web do Jsont o ts. Também mudei algumas coisas no meu service que passou a retornar um Observable<Page> e tambem fiz modificações do meu datasource. Mas mesmo assim, não está mostrando nada.. tem idéia do que seja? Acredito que meu datasource esteja errado agora, mas não sei onde.
    – oitathi
    Commented 23/07/2019 às 17:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .