Flávio, criei um serviço e o meu arquivo dashboard.component.ts está recuperando corretamente meu array de objetos. Entretanto, não consigo fazer com que estes objetos sejam apresentados em uma tabela no arquivo HTML. Sinto falta de informar o controller e não sei como resolver isso. Fiz o ngFor como ensinado na aula, mas pra mim não funcionou.
Ressalto que se eu criar o "rankingVendedores: Object[] = [];" no arquivo dashboard.component.ts e no meu private chamar como "this.rankingVendedores", o console deixa de imprimir meu array de objetos, gerando os erros:
dashboard.component.ts:189 An error occurred TypeError: Cannot set property 'rankingVendedores' of undefined
ERROR Error: Uncaught (in promise): Cannot set property 'rankingVendedores' of undefined
Envio a seguir meus códigos para verificar o que posso ter feito de errado.
SERVIÇO
import 'rxjs/add/operator/toPromise';
import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
@Injectable()
export class DashboardService {
headers: Headers;
options: RequestOptions;
params: URLSearchParams;
constructor(private http: Http) {
this.headers = new Headers({ 'Content-Type': 'application/json',
'Authorization': 'xxx'});
let params = new URLSearchParams();
params.append('tipoRanking', 'Valor');
params.append('quantidadeRanking', '10');
params.append('inicioPeriodo', '2017-03-28T14:24:10.016Z');
params.append('fimPeriodo', '2018-03-28T14:24:10.016Z');
this.options = new RequestOptions({ headers: this.headers, params: params });
}
getService(url: string): Promise<any> {
return this.http
.get(url, this.options)
.toPromise()
.then(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}TS
import { Component, OnInit } from '@angular/core';
import { DashboardService } from './dashboard.service';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
@Component({
moduleId: module.id,
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor(private dashboardService: DashboardService) { }
ngOnInit() {
this.dashboardService
.getService('http://.../v2/API/Consulta/ServicoConsulta.svc/consultarRankingClientes')
.then(this.extractData)
.catch(this.handleError);
}
private extractData(res: any) {
let rankingVendedores = res.Objetos;
return console.log(res);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}HTML
<table>
...
<tbody>
<tr *ngFor="let rankingVendedor of rankingVendedores">
<td>{{rankingVendedor.Nome}}</td>
<td>{{rankingVendedor.ValorVendido}}</td>
</tr>
</tbody>
</table>CONSOLE.LOG
No meu console, ao fazer um debug no arquivo *.component.ts, a "rankingVendedores" recebe corretamente as informações, só não sei porque o HTML não recebe.
Object
> Excecoes:[]
> Objetos: Array(10)
0: {Codigo: "000003", Nome: "NOME A", ValorVendido: 104628.2568}
1: {Codigo: "000009", Nome: "NOME B", ValorVendido: 50807.815}
