angular - イオン選択オプションから値を取得する方法

Question

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)

Answer 1

私の経験によると、後で .ts ファイルで簡単に取得できる(ionChange)="optionsFn();"を使用できます。[(ngModel)]="selectVariable"

Answer 2

1. オン イオン選択エレメント セット#id および(ionChange)="anyFunc()"

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

2. それに応じて ts ファイルを編集します。最も重要なのは、型ViewChildとして設定することですSelectionic-angular

import { Select } from 'ionic-angular';

@ViewChild('anyName') theSelectObject: Select;

contructor() { }

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

そして成功を祈る！

Answer 3

以下の変更を行った後に確認してください。

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