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

Buenas tardes. Estoy realizando una aplicación encon Angular 4 y usando Materialize cssCSS. Mi objetivo es: al cargarse un determinado componente se realiza una consulta HTTP que extrae unos datos, que rellenaranrellenará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{

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()ngOnInit(). El codigocó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 = error; console.log(errorMessage); } ); }

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);
      }
    );
  }
{{datos_Cen_Tra.name_com}}Seleccione centro de trabajo
<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>

{{datos_Cen_Tra.id}}

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

Buenas tardes. Estoy realizando una aplicación en Angular 4 y usando Materialize css. Mi objetivo es al cargarse un determinado componente se realiza una consulta HTTP que extrae unos datos, que rellenaran 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 codigo 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 = error; console.log(errorMessage); } ); }

{{datos_Cen_Tra.name_com}}Seleccione centro de trabajo

{{datos_Cen_Tra.id}}

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);
      }
    );
  }
<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>
<p>{{datos_Cen_Tra.id}}</p>
Origen Enlace
AntonioMP87
  • 499
  • 3
  • 15
  • 29

Rellenar select en Angular con resultados de consulta a una API

Buenas tardes. Estoy realizando una aplicación en Angular 4 y usando Materialize css. Mi objetivo es al cargarse un determinado componente se realiza una consulta HTTP que extrae unos datos, que rellenaran 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 codigo 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 = error; console.log(errorMessage); } ); }

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

{{datos_Cen_Tra.name_com}} Seleccione centro de trabajo

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:

{{datos_Cen_Tra.id}}

introducir la descripción de la imagen aquí

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