angular – 如何从ion-select选项中获取值

前端之家收集整理的这篇文章主要介绍了angular – 如何从ion-select选项中获取值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个名为options的对象数组.

这是我的HTML代码

  1. <ion-item>
  2. <ion-label>place</ion-label>
  3.  
  4. <ion-select [(ngModel)]="place" (click)="optionsFn(item);">
  5. <ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
  6. </ion-select>
  7. </ion-item>
  8.  
  9. {{salespriceOp}}
  10.  
  11. {{quantityOp}}

这是我的.ts文件代码

  1. product_option_value_idOp
  2. priceOp
  3. salespriceOp
  4. quantityOp
  5. skuOp
  6. nameOp
  7.  
  8. options = [
  9. {
  10. "product_option_value_id": "45","name": "Bangalore Auto","quantity": "12","sku": "56876","price": "100.00","salesprice": "50"
  11. },{
  12. "product_option_value_id": "51","name": "Hyderabad Auto","quantity": "23","sku": "56543","price": "200.00","salesprice": "60"
  13. },{
  14. "product_option_value_id": "52","name": "Delhi Auto","quantity": "14","sku": "98767","price": "300.00","salesprice": "80"
  15. }
  16. ];
  17. constructor(public navCtrl: NavController) {
  18.  
  19. }
  20.  
  21. optionsFn(item) {//here item is an object
  22. console.log(item);
  23. this.product_option_value_idOp = item.product_option_value_id;
  24. this.priceOp = item.price;
  25. this.salespriceOp = item.salesprice;
  26. this.quantityOp = item.quantity;
  27. this.skuOp = item.sku;
  28. this.nameOp = item.name;
  29. }

i am able to invoke the function but i am getting undefined in console.log(item)

有几件事情共同造成了这个错误.
第一个更改是,而不是像这样使用click事件:
  1. (click)="optionsFn(item);

您应该使用Ionic公开的ionChange事件,如下所示:

  1. (ionChange)="optionsFn();"

另请注意,由于您使用[(ngModel)] =“place”将select元素绑定到组件的某个属性,因此您无需将该项目作为参数发送,因为this.place将是所选项目何时触发ionChange事件.

这就是你的optionsFn方法看起来像这样的原因:

  1. public optionsFn(): void { //here item is an object
  2. console.log(this.place);
  3.  
  4. let item = this.place; // Just did this in order to avoid changing the next lines of code :P
  5.  
  6. this.product_option_value_idOp = item.product_option_value_id;
  7. this.priceOp = item.price;
  8. this.salespriceOp = item.salesprice;
  9. this.quantityOp = item.quantity;
  10. this.skuOp = item.sku;
  11. this.nameOp = item.name;
  12. }

猜你在找的Angularjs相关文章