1

Tengo este código html, que pertenece a un select dinámico que construyo como resultado de una info. que me llega de una api rest

<div class="row">
    <div class="col s12 m6">
        <div class="card">
          <div class="card-content black-text">  
                 <h6><strong>Server</strong></h6>             
                 <select type="number" [(ngModel)]="optionSelect" id="serverSelectServer"> 
                   <option value="All">All servers</option>
                   <option *ngFor="let xserver of serversCodifiers" [ngValue]="xserver.name">{{ xserver.name }}</option>
                 </select>
          </div>
        </div>
      </div>
</div>

Este es mi component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DatabaseService } from '../services/database.service';
import { Server } from '../model/server';
import { HttpErrorResponse } from '@angular/common/http';
import { Database } from '../model/database';
import { $ } from 'protractor';

@Component({
  selector: 'app-xserver',
  templateUrl: './xserver.component.html',
  styleUrls: ['./xserver.component.css']
})
export class XserverComponent implements OnInit {

  serversCodifiers : Server[]; 
  databases : Database[];

  public loading : boolean;

  optionSelect : any;

  constructor(private router : Router , private databaseService : DatabaseService) {
     this.loading = true;
   }

  ngOnInit() {
      this.databaseService.getAllServersNew().subscribe((data:any)=>{
      this.serversCodifiers = data;
      this.loading = false;
      this.databases = this.serversCodifiers[0].data;
    },(err : HttpErrorResponse)=>{
      console.log(err);
    });

  }

  Logout(){
    localStorage.removeItem('userToken');
    this.router.navigate(['/login']); 
  }  



}

Mi problema es que necesito obtener el valor de lo que se selecciona en el select para en base a eso poder actualizar los datos que muestro en la tabla , y no sé porque no obtengo el valor , estoy usando para contruir la visual Materializecss , a parte de eso , la inicialización del componente me dio problemas , y tuve que hacer una función javascript para que se me actualizara el componente.

Acá la muestro por si tiene algo que ver . De antemano muchas gracias.

var initSelect3 = true;
    $(document).on("focus" , "input.select-dropdown[value='All servers']", function(){
        if(initSelect3){
          $('#serverSelectServer').material_select();
          initSelect3 = false;
          $("input.select-dropdown[value='All servers']").click();
        }
    });
2
  • 1
    Un consejo no pedido: No uses Jquery con Angular. Rara vez hacer falta Commented el 7 may. 2018 a las 15:14
  • 2
    @PabloLozano por no decir nunca Commented el 11 dic. 2019 a las 1:44

1 respuesta 1

1

Utiliza el evento onModelChange para que seas notificado cuando cambie el model del select:

<select (ngModelChange)="selectChange()"> ... </select>

Entonces en tu componente defines el metodo y realizas lo que necesites:

export class XserverComponent implements OnInit {


  // se ejecuta cuando se cambia el select
  selectChange() {
    console.log(this.optionSelect);
  }

  serversCodifiers : Server[]; 
  databases : Database[];

  public loading : boolean;

  optionSelect : any;

 constructor(private router : Router , private databaseService : DatabaseService) {
     this.loading = true;
   }

  ngOnInit() {
      this.databaseService.getAllServersNew().subscribe((data:any)=>{
      this.serversCodifiers = data;
      this.loading = false;
      this.databases = this.serversCodifiers[0].data;
    },(err : HttpErrorResponse)=>{
      console.log(err);
    });

  }

  Logout(){
    localStorage.removeItem('userToken');
    this.router.navigate(['/login']); 
  }  
}

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.