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

Question

当我在方法中控制台日志selectedVendor时vendorUpdate它显示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);  
}

从选择下拉列表中选择值时，选择供应商打印上一个选定的值，而应打印当前选定的值。

Answer 1

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

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

<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);
}

Answer 2

实际上你不需要ngModelChange，如果你不想做任何依赖操作，[(ngModel)]会做剩下的事情(双向绑定(。

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

在这里演示