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);
}
);
}
<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>