Md-select 值在 select 后不变

Question

我对使用 Angular 和 Angular Material 的 md-select 组件有问题 2. 当我更改 select 的值时，它起作用了，但是值的 md-select 保持不变，在我的例子中是默认的 selected 选项 "LTC"。我需要显示当前的 selected 选项而不是默认的 selected 选项。感谢您的帮助！

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 事件 (change)="" 它会让你在每次选择新选项时进行控制，因此它会触发事件。

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

编辑

在您的情况下（如您所见，md-options 的值等于该项目）：

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

希望有用。

Md-select 值在 select 后不变

Md-select value not changing after select

angular

typescript

angular-material

md-select