Hago un servicio para obtener datos del back-end como el modelo predefinido, luego llamo los datos a mi componente, sin embargo, recibí el error de que no pude resolverlo después de investigar en Internet. El error ocurre en mi componente cuando intento pasar datos a una cadena vacía que declaré antes.

Este es mi servicio:

import { Observable } from 'rxjs/Observable';
import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ORIGIN_URL, API_PREFIX } from '../shared/constants/baseurl.constants';
import { History } from '../models/history';
import 'rxjs/add/operator/map';

@Injectable()
export class HistoricalBpiService {

  private apiUrl: string;

  constructor(
    private http: Http,
    @Inject(ORIGIN_URL) private baseUrl: string,
    @Inject(API_PREFIX) private apiPrefix: string
  ) {
    this.apiUrl = baseUrl + apiPrefix;
  }

  oneYear(): Observable<History[]> {
    return this.http.get(this.apiUrl + 'data/history/365')
      .map((res: Response) => res.json() as History[])
      .catch(this.handleError);
  }

  private handleError(error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

Este es el modelo:

export interface History {
    date: string;
    value: number;
}

Este es el componente:

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { History } from '../../models/history';

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

  history: History[] = [];

  public lineChartData: any = [
    { data: [], label: 'BTC' }
  ];

  public lineChartLabels: Array<any> = [];

  constructor(
    private historicalBpiService: HistoricalBpiService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  oneYear() {
    this.historicalBpiService.oneYear()
      .subscribe((data: History[]) => {
        this.history = data;
        for (let i of this.history) {
          this.lineChartData[0].data = i.value;
          this.lineChartLabels = i.date; // THIS LINE CAUSES ERROR !!!
        }
      });
  }

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // Default chart
      this.oneYear();
    }
  }
}
1
Hoàng Nguyễn 13 nov. 2017 a las 12:52

2 respuestas

La mejor respuesta

Supongo que i.date es un string, porque this.lineChartLabels es un Array<any>, no puede asignarle una cadena.

Es mejor presionar en lugar de asignar:

this.lineChartLabels.push(i.date)
1
Venomy 13 nov. 2017 a las 09:55

Como dice el error, está intentando asignar una cadena al tipo de cualquiera, debe empujar la cadena a la matriz,

this.lineChartLabels.push(i.date); 
1
Sajeetharan 13 nov. 2017 a las 09:54