Question

我使用Angular和Angular Material 2的md-select组件有问题。当我更改select值时，它有效，但md-select的值保持不变，在我的情况下是默认选择选项＆＃34; LTC＆＃34;。我需要显示当前选择的选项而不是默认选择的选项。谢谢你的帮助！

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>

Answer 1

你应该在这个案例(change)=""上使用更改事件，它会让你在每次选择一个新选项时进行控制，这样就会触发事件。

对于您的问题，您告诉所有值都是[value]="regTypeSelectedOption"并且您指定它是＆＃34; LTC＆＃34;默认情况下，您只需要在NgModel上使用regTypeSelectedOption，但不能在值上使用。{/ p>

修改

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

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

希望它有效。

选择后，Md选择值不会改变

1 个答案: