web-dev-qa-db-ja.com

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

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)で未定義になります

angulartypescriptionic-frameworkionic2ionic3
10
Mohan Gopi

一緒にそのエラーを引き起こしたいくつかのことがありました。最初の変更点は、次のようにclickイベントを使用する代わりに：

_(click)="optionsFn(item);
_

Ionicは次のように公開するionChangeイベントを使用する必要があります。

_(ionChange)="optionsFn();"
_

また、[(ngModel)]="place"を使用してselect要素をコンポーネントのプロパティの1つにバインドするため、_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;
  }
_
17
sebaferreras

（クリック）イベントの代わりに（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>
1
ragav