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 el 7 may. 2018 a las 15:14
  • 2
    @PabloLozano por no decir nunca
    – userStack
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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