ngModel显示在md-select上选择的上一个值

时间:2017-07-28 13:48:25

标签: angular angular-material2

当我在方法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);  
}

从选择下拉列表中选择值时,selectVendor将打印上一个选定的值,而应打印当前选定的值。

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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>

Demo Here