1

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.

2
  • ¿Puedes añadir el JSON que te devuelve la llamada? Commented el 16 dic. 2017 a las 18:54
  • No puedo mostrar los resultados del console log ya que son datos privados, pero he verificado que la salida no esta vacia. Es mas, los datos se muestran por ejemplo si meto el valor dentro de un input, o bien, si el select pertenece a la clase browser-default, es decir, que no tenga los estilos ni efectos de materialize css. Commented el 17 dic. 2017 a las 11:08

2 respuestas 2

1

Prueba con la siguiente opción, iterar sobre tu resultado con un *ngFor en . Por lo que entiendo tienes una lista de centros de trabajos, por lo tanto iterar sobre la misma e ir mostrando los resultados seria factible.

A continuación te dejo como quedaría el html. Espero te sea de utilidad.

<div class="input-field col s12">
            <select id="listCenTra">
              <option value="" *ngFor="let dato of datos_Cen_Tra">
                 {{dato.name_com}}
             </option>
            </select>
            <label>Seleccione centro de trabajo</label>
    </div>
2
  • Gracias por tu respuesta. Estoy tratando de hacerlo de la forma en la que comentas, pero he observado que da el siguiente fallo: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." Parece ser que el resultado de la respuesta me esta llegando en forma de objeto, y no logro transformarlo en un array para realizar la iteración. Commented el 18 dic. 2017 a las 14:58
  • Puede transformarlo a un Array, deberías tener definida la Class de los objetos que te llegan y usar JSON.parse(). Por ejemplo: const loginResponse: LoginResponse = JSON.parse(response.body); Este ejemplo es para un solo objeto, pero si tu JSON contiene una lista de los mismos, automáticamente te popularia una lista, definiendo la variable como tal, porque sino daría error. Commented el 18 dic. 2017 a las 15:06
0

Muchas gracias por toda la ayuda. Al final no logre parsear la respuesta http por el método JSON.parse, aunque efectivamente, el problema estaba en que la respuesta no se almacenaba en forma de Array. Al final, lo que hice fue almacenar la respuesta en una variable creada como array public resultadoConcepto:Array<any>;

y después recorrer esta variable en el ngFor:

<select id="listConcep">
          <option value=""  *ngFor = "let concepto of resultadoConcepto;">{{concepto.name}}</option>
        </select>
        <label>Seleccione concepto</label>

De este modo, el desplegable se rellena con los datos extraídos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.