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

Posted 2023-02-22

【中文标题】ngModel 显示在 md-select 上选择的先前值

【英文标题】：ngModel shows previous value selected on md-select

【发布时间】：2018-01-04 14:57:57

【问题描述】：

当我在方法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 会打印上一个选择的值，而应该打印当前选择的值。

【参考方案1】：

其实你不需要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

【讨论】：

否则很好，但第一部分 ngModelChange 不起作用，因为它是一个选择，vendor 在循环之外。我知道你知道这一点，但我认为你想纠正它:)

@AJT_82 愚蠢的我 :D 我更新了我的答案，谢谢提醒 :)

没问题，毕竟是星期五，所以有点累是完全可以接受的 :D

@Harsh for .beta1 floatPlaceholder 是 floatingPlaceholder，因为 beta.2 已更改为 floatPlaceholder，请检查 changelog

【参考方案2】：

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

【讨论】：

感谢 AJT_82，我有疑问将不胜感激解释，我知道 () 是用于查看模型和 [] 用于模型查看，[ngModel] 确切的功能是什么，第二个是调用像这里 vendorUpdate() 这样的函数，如果我想要函数中的值，是否有必要传递事件

如果我将 [(ngModel)] 与 (ngModelChange) 一起使用，还有一个查询，它可以工作，那么使用 [ngModel] 和 (ngModelChange) 会有什么不同谢谢

[] 是从模型到视图，正确的是 () 是事件。是的，在这种情况下，必须通过 $event 才能获得新值。使用[( )]，您可以同时捕获 value and 事件，这就是它的工作原理。阅读本文可能有助于更好地理解:) ***.com/questions/35944749/…