Skip to main content
2 de 2
se añadieron 255 caracteres en el cuerpo
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Rellenar select en Angular con resultados de consulta a una API

Estoy realizando una aplicación con Angular 4 y usando Materialize CSS. Mi objetivo es: al cargarse un determinado componente se realiza una consulta HTTP que extrae unos datos, que rellenarán de forma dinámica un select contenido en la vista. A continuación, muestro el servicio que realiza la consulta:

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


@Injectable()
export class citasService{

    public url:string;
   
    constructor(private _http:Http){
       this.url = "URL API";
    }

    getCenTra(){
        return this._http.get(this.url)
        .map(res => res.json());
    }
}

Este servicio esta injectado en el componente, y la busqueda se realiza con exito con el metodo ngOnInit(). El código se muestra a continuación:

import { Component } from '@angular/core';
import { citasService } from '../services/citas.service';
import { CitasModel } from './citas.model';

declare var $:any;
declare var Jquery:any;

@Component({
  selector: 'citas',
  templateUrl: './citas.component.html',
  styleUrls: ['./citas.component.css'],
  providers: [ citasService ]
 
})
export class citasComponent {

  public datos_Cen_Tra: CitasModel;

  constructor(private _resultado:citasService){
    this.datos_Cen_Tra = new CitasModel("",0,"","",0,"", "");
  }

  ngOnInit(){
    $('select').material_select('destroy');
    this._resultado.getCenTra().subscribe(
      result=>{
         if(result.count == 1){
           this.datos_Cen_Tra = result.cen_tra[0];
           $('select').material_select();
         }else{
          console.log(result);
         }
      },
      error=>{
        var errorMessage = <any>error;
        console.log(errorMessage);
      }
    );
  }

Y a continuación, el html donde se imprime el resultado:

<div class="input-field col s12">
    <select id="listCenTra">
      <option value="">{{datos_Cen_Tra.name_com}}</option>
    </select>
    <label>Seleccione centro de trabajo</label>
</div>

El problema es que, los datos no se llegan a cargar en el select:

introducir la descripción de la imagen aquí

En cambio, si lo imprimo por pantalla, por ejemplo dentro de una etiqueta p, si se imprime correctamente:

<p>{{datos_Cen_Tra.id}}</p>

introducir la descripción de la imagen aquí

No se que puede estar fallando. Muchas gracias por adelantado por la ayuda.

AntonioMP87
  • 499
  • 3
  • 15
  • 29