Question

我正在提取项目列表，然后将其填充到下拉列表中。我想要实现的是当我选择一个产品时，它的价格应该在数量文本框中填充。

<ion-item>
  <ion-label>Item</ion-label>
  <ion-select (ionChange)="getProduct()" [(ngModel)]="product">
    <ion-option [value]="item.product" *ngFor="let item of items">{{item.product}}</ion-option>

  </ion-select>
</ion-item>

<ion-item>
    <ion-label>Available</ion-label>
    <ion-input type="number" [(ngModel)]="quantity"></ion-input>
  </ion-item>

JS

  items:any;
  product:any;
  available:any;
  quantity:any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.items=[

      {
          "product": "Ideal Milk",
          "quantity": '5'
      },
      {
        "product": "Indome",
        "quantity": '1'
      },
      {
          "product": "Corn Flakes",
          "quantity": '20'
      },
      {
        "product": "Digestive Biscuit",
        "quantity": '12'
      }
  ]
  }


  getProduct(){

  }

}

我正在尝试编写一个函数getProduct()，它将检查所选产品并在数量文本框中填充它，这就是我想要实现的目标。

Answer 1

ion-select绑定到product和ion-input绑定到quantity，因此您需要做的就是在更改quantity时更新ion-select。

1）只需将getProduct()重命名为onSelectValueChange()即可更清晰。

2）触发产品更改onSelectValueChange时。更新this.quantity内的onSelectChange()。 quantity的新值应自动反映ion-input。

.html

<ion-item>
  <ion-label>Item</ion-label>
  <ion-select (ionChange)="getProduct()" [(ngModel)]="product">
    <ion-option [value]="item.product" *ngFor="let item of items">{{item.product}}</ion-option>

  </ion-select>
</ion-item>

<ion-item>
    <ion-label>Available</ion-label>
    <ion-input type="number" [(ngModel)]="quantity"></ion-input>
  </ion-item>

.ts

 items:any;
  product:any;
  available:any;
  quantity:any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.items=[

      {
          "product": "Ideal Milk",
          "quantity": '5'
      },
      {
        "product": "Indome",
        "quantity": '1'
      },
      {
          "product": "Corn Flakes",
          "quantity": '20'
      },
      {
        "product": "Digestive Biscuit",
        "quantity": '12'
      }
  ]
  }


  onSelectValueChange(){
      this.quantity = this.items.find((element)=>element.product=== this.product).quantity
  }

}

获取选定项目以填充离子2和角度中的文本框

1 个答案: