Angular Why does not it show data brought by http?

1

When executing the code, it shows nothing.

auto.service.ts

import { Injectable, Component, NgModule } from '@angular/core';
import { Http , Response , Headers, HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AutoService {
  private uri = 'https://localhost:8443';//esta url esta buena, saco datos y todo.

  constructor( private http: Http ) { }

getVersion(id): Observable<any[]> {
    const headers = new Headers();
    return this.http.get(this.uri + '/versions/' + id + '.json', {headers: headers}).map(res => res.json());
  }

getPrecios(): Observable<any[]> {
    const headers = new Headers();
    return this.http.get(this.uri + '/precios.json', {headers: headers}).map(res => res.json());
  }

}

auto-show.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AutoService } from '../auto.service';

@Component({
  selector: 'app-auto-show',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './auto-show.component.html',
  styleUrls: ['./auto-show.component.css'] 
})

export class AutoShowComponent implements OnInit {
  public version: any = [];
  public precios: any = [];
  public errorMesage: string;
  public id: any = '';
  public idVersion = this.route.snapshot.paramMap.get('id');

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private _autoService: AutoService
  ) { }
  
  getVersion(idVersion) {
    return this._autoService.getVersion(idVersion).subscribe(
      data => {
        this.version = data;
        this.id = data['id'];
        console.log(this.version.nombre);
        console.log(this.id);
      },
      error => {
        this.errorMesage = <any> error;
      }
    );
  }

  getPrecios() {
    return this._autoService.getPrecios().subscribe(
      data => this.precios = data, error => this.errorMesage = <any> error
    );
  }

  ngOnInit() {
    this.getVersion(this.idVersion);
    this.getPrecios();
  }
  
}

auto-show.component.html

<!-- Listing-detail-header -->
<section class="listing_detail_header">
  <div class="container">
    <div class="listing_detail_head white-text div_zindex row">
      <div class="col-md-9">
        <div class="col-md-12">
          <h2>{{version.nombre ? version.nombre: "Sin Version"}}</h2>
        </div>
        <div class="car-location"><span><i class="fa fa-map-marker" aria-hidden="true"></i> 12250 F Garvey Ave South West Covina, CA 91791</span></div>
        <div class="add_compare">
          <div class="checkbox">
            <input value="" id="compare14" type="checkbox">
            <label for="compare14">Add to Compare</label>
          </div>
          <div class="share_vehicle">
            <p>Share: <a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a> </p>
          </div>
        </div>
      </div>
      <div *ngFor="let p of precios" class="col-md-3">
        <div *ngIf="'/versions/' + id == p.version" class="price_info">
          <p>$ {{p.valor ? p.valor: "Sin Valor"}}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="dark-overlay"></div>
</section>
<!-- /Listing-detail-header -->
    
asked by Diego 09.04.2018 в 22:15
source

0 answers