Ionic 如何从ion-select选项获取值

hjzp0vay  于 2022-12-08  发布在  Ionic
关注(0)|答案(7)|浏览(290)

我有一个名为options对象数组。
这是我的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)中未定义

whhtz7ly

whhtz7ly1#

有几个因素共同导致了这个错误。第一个变化是不使用click事件,如下所示:

(click)="optionsFn(item);

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

(ionChange)="optionsFn();"

另请注意,由于使用[(ngModel)]="place"将select元素绑定到组件的某个属性,因此不需要将该项作为参数发送,因为this.place将在ionChange事件触发时成为选定项。
这就是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;
  }
3hvapo4f

3hvapo4f2#

使用(ngModelChange)而不是(click)事件。

(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>
zi8p0yeb

zi8p0yeb3#

你可以这样做

<ion-select (ionChange)="itemId = $event.target.value">
  <ion-select-option *ngFor="let s of itemIds" value="{{s.id}}">{{s.name}}</ion-select-option>
</ion-select>

或者你也可以这样做

<ion-select value="{{itemId}}" [(ngModel)]="itemId">
  <ion-select-option *ngFor="let s of itemIds" value="{{s.id}}">{{s.name}}</ion-select-option>
</ion-select>

而在你的.ts文件中只是声明变量itemId;

b91juud3

b91juud34#

根据我的经验而不是(ionChange)="optionsFn();",我们可以使用[(ngModel)]="selectVariable",它可以很容易地提取后在.ts文件

fhity93d

fhity93d5#

1.在离子选择元件组#id(ionChange)="anyFunc()"

<ion-select (ionChange)="anyFunc()" #anyName>
  <ion-option value="{{item.id}}" *ngFor="let item of apicall?.items"></ion-option>
</ion-select>

1.最重要的是将ViewChildionic-angular设置为Select类型

import { Select } from 'ionic-angular';

@ViewChild('anyName') theSelectObject: Select;

contructor() { }

anyFunc() {
    const theValue = this.theSelectObject.value;
}

祝你好运!

lpwwtiir

lpwwtiir6#

HTML格式

<ion-select  (ionChange)="optionsFn($event)">
<ion-option    *ngFor="let item of options" [value]="item.name"> 
  {{item.price}}</ion-option> 
 </ion-select>

英寸

optionsFn(event) {
 console.log(event);
}
tzdcorbm

tzdcorbm7#

进行以下更改后进行检查:
// 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;
}

相关问题