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!