如何从离子选择选项中获取值 [英] How to get the value from ion-select option

问题描述

我有一个名为 options 的对象数组.

这是我的html代码

 <ion-label>place</ion-label><ion-select [(ngModel)]="place" (click)="optionsFn(item);"><ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option></离子选择></ion-item>{{salespriceOp}}{{quantityOp}}

这是我的 .ts 文件代码

product_option_value_idOp价格操作销售价格数量操作skuOp名称操作选项 = [{"product_option_value_id": "45","name": "班加罗尔汽车","数量": "12","sku": "56876","价格": "100.00",销售价格":50"},{"product_option_value_id": "51","name": "海得拉巴汽车","数量": "23","sku": "56543","价格": "200.00",销售价格":60"},{"product_option_value_id": "52","name": "德里汽车","数量": "14","sku": "98767","价格": "300.00",销售价格":80"}];构造函数(公共导航控件:导航控制器){}optionsFn(item) {//这里的 item 是一个对象控制台日志(项目)；this.product_option_value_idOp = item.product_option_value_id;this.priceOp = item.price;this.salespriceOp = item.salesprice;this.quantityOp = item.quantity;this.skuOp = item.sku;this.nameOp = item.name;}

<块引用>

我能够调用该函数，但我在 console.log(item)

中未定义

解决方案

有几个因素共同导致了该错误.第一个变化是，不是像这样使用 click 事件:

(click)="optionsFn(item);

您应该像这样使用 Ionic 公开的 ionChange 事件:

(ionChange)="optionsFn();"

另请注意，由于您使用 [(ngModel)]="place" 将 select 元素绑定到组件的属性之一，因此您不需要将该项目作为参数发送，因为 this.place 会在 ionChange 事件被触发时被选中.

这就是为什么你的 optionsFn 方法看起来像这样:

public optionsFn(): void {//这里 item 是一个对象控制台日志(这个地方)；让 item = this.place;//这样做是为了避免更改下一行代码:Pthis.product_option_value_idOp = item.product_option_value_id;this.priceOp = item.price;this.salespriceOp = item.salesprice;this.quantityOp = item.quantity;this.skuOp = item.sku;this.nameOp = item.name;}

I have an array of object called options.

this is my html code

    <ion-item>
        <ion-label>place</ion-label>

        <ion-select [(ngModel)]="place" (click)="optionsFn(item);">
          <ion-option value="item" *ngFor="let item of options">{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option> 
        </ion-select>
      </ion-item>

{{salespriceOp}}

{{quantityOp}}

this is my .ts file code

product_option_value_idOp
  priceOp
  salespriceOp
  quantityOp
  skuOp
  nameOp

  options =  [
          {
            "product_option_value_id": "45",
            "name": "Bangalore Auto",
            "quantity": "12",
            "sku": "56876",
            "price": "100.00",
            "salesprice": "50"
          },
          {
            "product_option_value_id": "51",
            "name": "Hyderabad Auto",
            "quantity": "23",
            "sku": "56543",
            "price": "200.00",
            "salesprice": "60"
          },
          {
            "product_option_value_id": "52",
            "name": "Delhi Auto",
            "quantity": "14",
            "sku": "98767",
            "price": "300.00",
            "salesprice": "80"
          }
        ];
  constructor(public navCtrl: NavController) {

  }

  optionsFn(item) {//here item is an object 
    console.log(item);
    this.product_option_value_idOp = item.product_option_value_id;
    this.priceOp = item.price;
    this.salespriceOp = item.salesprice;
    this.quantityOp = item.quantity;
    this.skuOp = item.sku;
    this.nameOp = item.name;
  }

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

解决方案

There were several things that together caused that error. The first change there is that instead of using the click event like this:

(click)="optionsFn(item);

You should use the ionChange event that Ionic exposes like this:

(ionChange)="optionsFn();"

Also notice that since you use the [(ngModel)]="place" to bind the select element to one of your component's properties, you don't need to send the item as a parameter, because this.place will be the selected item when the ionChange event is triggered.

That's why your optionsFn method would look like this:

public optionsFn(): void { //here item is an object 
    console.log(this.place);

    let item = this.place; // Just did this in order to avoid changing the next lines of code :P

    this.product_option_value_idOp = item.product_option_value_id;
    this.priceOp = item.price;
    this.salespriceOp = item.salesprice;
    this.quantityOp = item.quantity;
    this.skuOp = item.sku;
    this.nameOp = item.name;
  }

这篇关于如何从离子选择选项中获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！