2017-09-26 2 views
0

J'ai un problème avec un composant md-select utilisant des matériaux angulaires et angulaires 2. Lorsque je change la valeur de select cela fonctionne, mais la valeur de md-select reste la même, qui dans mon cas est l'option sélectionnée par défaut "LTC". J'ai besoin d'afficher l'option actuellement sélectionnée et non l'option sélectionnée par défaut. Merci pour votre aide!La valeur de Md-select ne change pas après sélection

component.ts

import { Component, OnInit } from '@angular/core'; 

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

    regTypeSelectedOption: string = "LTC"; 
    selectedNav: any; 
    navs = ['LTC', 'ETH', 'ZEC', 'XRP'] 

    constructor() { } 

    setNav(nav:any){ 
    this.selectedNav = nav; 
     if(this.selectedNav == "LTC"){ 
      this.regTypeSelectedOption = "LTC"; 
     } 
     else if(this.selectedNav == "ETH"){ 
      this.regTypeSelectedOption = "ETH"; 
     } 
     else if(this.selectedNav == "ZEC"){ 
      this.regTypeSelectedOption = "ZEC"; 
     } 
     else if(this.selectedNav == "XRP"){ 
      this.regTypeSelectedOption = "XRP"; 
     } 
    } 

    ngOnInit() { 
    this.selectedNav = 'select value'; 
    } 

} 

html

<div class="main-content"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-8"> 
       <div class="card"> 
        <div class="card-header card-header-text"> 
         <h4 class="card-title">Comprar Criptodivisas</h4> 
         <p class="category">Seleccione la criptodivisa que desea comprar</p> 
        </div> 
        <div class="card-content"> 
         <md-select placeholder="Moneda" [(ngModel)]="regTypeSelectedOption"> 
          <md-option [value]="regTypeSelectedOption" (click)="setNav(item)" *ngFor="let item of navs">{{item}}</md-option> 
         </md-select> 
         <app-comprarzec *ngIf="regTypeSelectedOption === 'ZEC'"></app-comprarzec> 
         <app-comprarxrp *ngIf="regTypeSelectedOption === 'XRP'"></app-comprarxrp> 
         <app-comprarltc *ngIf="regTypeSelectedOption === 'LTC'"></app-comprarltc> 
         <app-comprareth *ngIf="regTypeSelectedOption === 'ETH'"></app-comprareth> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Répondre

0

vous devez utiliser l'événement de changement dans ce cas (change)="" il vous permettra CONTROLL chaque fois qu'une nouvelle option est sélectionnée afin qu'il déclenche l'événement .

Pour votre problème, vous dites que toutes les valeurs sont [value]="regTypeSelectedOption" et vous avez spécifié qu'il est "LTC" par défaut, vous devez seulement utiliser regTypeSelectedOption à NgModel, mais pas sur la valeur.

EDIT

Dans votre cas (Comme vous pouvez voir la valeur des options correspond-md à l'article):

<md-option [value]="item" (click)="setNav(item)" *ngFor="let item of navs">{{item}}</md-option> 

espérons que cela fonctionne.

+0

Merci pour votre réponse Manel, mais pourriez-vous être plus précis s'il vous plaît? Im juste apprendre –

+0

Juste édité, j'espère que vous l'obtenez maintenant. –

+0

Merci Manel, ça a fonctionné même si vous n'avez pas utilisé '(change) =" "' ' –