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í][1]][1]


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í][2]][2]


  [1]: https://i.sstatic.net/VWgKL.png
  [2]: https://i.sstatic.net/ALg3q.png


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