如何从离子选择选项中获取值

这是我的html代码

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

这是我的.ts文件中的代码

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

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

越来越不确定

来源

2016-09-15 Mohan Gopi

它不工作，因为你从选择标签调用'optionsFn'函数。你必须将它添加到'ion-option'标签 – ranakrunal9

@ ranakrunal9我认为只有在'ion-option'标签中使用'ion-select'标签时，才应该使用点击功能，我不能调用这个功能本身 –

因此，为了使用它离子选择，你必须在'ion-option'中分配'[value] = item'，并且需要在'optionsFn'函数中使用'gaming'。所以从'optionsFn'中移除参数并尝试检查。 – ranakrunal9

有几件事情是一起造成的错误。第一个变化则存在而不是使用click事件是这样的：

(click)="optionsFn(item);

您应该使用ionChange事件离子暴露出这样的：

(ionChange)="optionsFn();"

还要注意的是，由于您使用[(ngModel)]="place"要将select元素绑定到组件的某个属性，则不需要将该项目作为参数发送，因为当触发ionChange事件时，this.place将成为所选项目。

这就是为什么你optionsFn方法是这样的：

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

来源

2016-09-15 09:31:12 sebaferreras

你正在使用离子列表本身的销售价格和pice，但我需要在列表之外显示，所以只有我尝试发送整个对象作为参数 –

但是你可以使用'place？.salespriceOp'来显示它在哪里，因为它是组件的一部分。 – sebaferreras

如果你想要，我可以改变蹲点，告诉你如何去做:) – sebaferreras

-1

进行以下更改后进行检查：

// HTML变化

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

//.ts改变

optionsFn() { 
    console.log(this.gaming); 
    let item = this.gaming; 
    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; 
}

来源

2016-09-15 06:06:59 ranakrunal9

我想我得到相同的错误 –

你可以请检查通过更改'value =“item”'到' [value] =“item”' – ranakrunal9

我认为[]这个括号用于角度2来获取ts文件的值到你的plunker中的html –

使用（ngModelChange），而不是（点击）事件。

(ngModelChange)="optionsFn()"

每当模型值改变时ngModelChange会自动调用相对函数。

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

来源

2017-10-25 01:47:37 ragav

如何从离子选择选项中获取值

回答

相关问题