angular - ngModel 显示之前在 md-select 上选择的值

Question

当我在 vendorUpdate 方法中控制台记录 selectedVendor 时，它显示 selectedVendor 的先前值而不是新值。

<div>
   <md-select id="vendorVariable" class="vm-select-wrap" 
              (ngModelChange)="vendorUpdate()"
              [(ngModel)]="selectedVendor" placeholder="AWS" 
              name="vendorVariable">
      <md-option *ngFor="let vendor of vendors" value={{vendor.small}}>
          {{vendor.caps}}
      </md-option>
   </md-select>
</div>

TS 文件:

vendors: any = [
   {caps: "AWS", small: "aws"},
   {caps: "AZURE", small: "azure"}
];

selectedVendor :any;                    

vendorUpdate(){
  this.selectedVendor = this.selectedVendor;
  console.log(this.selectedVendor);  
}

从选择下拉列表中选择值时，selectVendor 会打印先前选择的值，而应打印当前选择的值。

Answer 1

[(ngModel)] 基本上等于:[ngModel] 和 (ngModelChange)。所以我建议使用其中任何一个。

如果您像 Pankaj 建议的那样使用双向绑定(bind)，则可以跳过 ngModelChange。否则，您也可以使用单向绑定(bind)和 ngModelChange。作为旁注，您还可以使用 [value]="vendor.small" 而不是 value="{{vendor.small}}。与 [ ] 我们绑定(bind)变量。

<md-select [ngModel]="selectedVendor" (ngModelChange)="vendorUpdate($event)">
   <md-option *ngFor="let vendor of vendors" [value]="vendor.small">
      {{vendor.caps}}
   </md-option>
</md-select>

TS:

vendorUpdate(value) {
  this.selectedVendor = value;
  console.log(this.selectedVendor);
}