web-dev-qa-db-fra.com

Comment obtenir la valeur de l'option de sélection ionique

J'ai un tableau d'objets appelé options.

c'est mon code 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}}

c'est mon code de fichier .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;
  }

je peux invoquer la fonction mais je suis indéfini dans console.log(item)

angulartypescriptionic-frameworkionic2ionic3
10
Mohan Gopi

Plusieurs choses ont causé cette erreur ensemble. Le premier changement est qu'au lieu d'utiliser l'événement click comme ceci:

(click)="optionsFn(item);

Vous devez utiliser l'événement ionChange que Ionic expose comme ceci:

(ionChange)="optionsFn();"

Notez également que puisque vous utilisez la [(ngModel)]="place" pour lier l'élément select à l'une des propriétés de votre composant, vous n'avez pas besoin d'envoyer l'élément en tant que paramètre, car this.place Sera l'élément sélectionné élément lorsque l'événement ionChange est déclenché.

C'est pourquoi votre méthode optionsFn ressemblerait à ceci:

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

Utilisez (ngModelChange) au lieu de l'événement (click).

(ngModelChange)="optionsFn()"

chaque fois que la valeur du modèle change, ngModelChange appelle automatiquement la fonction relative.

<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