Problems with dynamic selection in angular 5

Question

Problems with dynamic selection in angular 5

Navigation

#1 by (0 votes)

0

I have this html code, which belongs to a dynamic select that I build as a result of an info. that comes to me from a rest api

<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>

This is my 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']); 
  }  



}

My problem is that I need to obtain the value of what is selected in the select so that I can update the data that I show in the table, and I do not know why I do not get the value, I am using it to build the visual Materializecss , apart from that, the initialization of the component gave me problems, and I had to make a javascript function to update the component.

Here I show it in case it has something to do with it. Thank you in advance.

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

angularjs angular5

asked by Escarlet Escoto 07.05.2018 в 16:22

source

1 answer

Can you create docm files with javasacript from jsp? REGEXP_REPLACE SQL / ORACLE

score 0 · Answer 1

Use the onModelChange event to be notified when the select model changes:

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

Then in your component you define the method and do what you need:

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