Tengo un problema al compilar la aplicación, para producción, en local funciona bien. Tengo el siguiente componente:
import { Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as StocksAPI from './../simbolos/earnings';
import { IexEarningsService } from './../services/iex-earnings.service';
@Component({
selector: 'app-symbol-detail',
templateUrl: './symbol-detail.component.html',
styleUrls: ['./symbol-detail.component.css']
})
export class SymbolDetailComponent {
dataEarnings: Array<StocksAPI.EarningsResponse> = [];
constructor(
private route: ActivatedRoute,
private _servicioIEX: IexEarningsService) {
this.getEarnings();
}
getEarnings() {
this.route.params.subscribe(result => {
this._servicioIEX.obtenerDatosEarnings(result['symbol']).subscribe((res) => {
this.dataEarnings = res
})
})
}
Con la siguiente interface:
export interface Earning {
actualEPS: number
consensusEPS: number
estimatedEPS: number
announceTime: string
numberOfEstimates: number
EPSSurpriseDollar: number
EPSReportDate: string
fiscalPeriod: string
fiscalEndDate: string
yearAgo: number
yearAgoChangePercent: number
estimatedChangePercent: number
symbolId: number
}
export interface EarningsResponse {
symbol: string
earnings: [Earning]
}
He creado un servicio con Observable que tiene el siguiente código:
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs';
import * as StocksAPI from './../simbolos/earnings';
@Injectable({
providedIn: 'root'
})
export class IexEarningsService {
private url = "https://api.iextrading.com/1.0/stock/"
private earnings = "/earnings"
constructor(private http: HttpClient) {
console.log('Servicio earnings funcionando!')
}
obtenerDatosEarnings(symbol): Observable<StocksAPI.EarningsResponse[]> {
return this.http
.get<StocksAPI.EarningsResponse[]>(this.url + symbol + this.earnings)
}
}
Y en el html tengo la siguiente tabla:
<table class="table table-hover table-sm">
<thead>
<th>Fiscal Period</th>
<th>Actual EPS</th>
<th>EPS Report Date</th>
<th>Fiscal End Date</th>
</thead>
<tbody class="detalle" *ngFor="let item of dataEarnings.earnings;let k=index">
<th>{{dataEarnings.earnings[k].fiscalPeriod}}</th>
<td>{{dataEarnings.earnings[k].actualEPS}}</td>
<td>{{dataEarnings.earnings[k].EPSReportDate}}</td>
<td>{{dataEarnings.earnings[k].fiscalEndDate}}</td>
</tbody>
</table>
Al utilizar ng build --prod genera el siguiente Error:
ERROR in src\app\symbol-detail\symbol-detail.component.html(20,28): : Property 'earnings' does not exist on type 'EarningsResponse[]'.
En local funciona bien, pero no me deja compilar el proyecto, y otra pregunta es, ¿Es la forma correcta de utilizar el servicio con Observable?
Muchas Gracias.