0

我有一个使用 Angular 和 Angular Material 2 的 md-select 组件的问题。当我更改 select 的值时，它可以工作，但 md-select 的值保持不变，在我的情况下是默认选择的选项“LTC ”。我需要显示当前选择的选项，而不是默认选择的选项。谢谢你的帮助！

组件.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>
4

1 回答 1

0

您应该在这种情况下使用更改事件，(change)=""它会让您在每次选择新选项时进行控制，以便触发事件。

对于您的问题，您告诉所有值都是[value]="regTypeSelectedOption"并且您指定它是“LTC”作为默认值，您只需要regTypeSelectedOption在 NgModel 上使用，而不是在值上使用。

编辑

在您的情况下（您可以看到 md-options 的值等于该项目）：

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

希望它有效。

于 2017-09-26T17:11:42.953 回答