How to pass value from html to typescript while value getting from for loop

0
votes

I'm developing Hybrid app using ionic 2. i am stuck in pass value from html to typescript. in this page i have first set select option from ion-select and i have set for loop(ngFor) in ion-option. below select option i have put button for add selected service to database(button is outside of ngFor so i can't send option id to typescript) and i had set option name in value.

my code is below

<ion-item>
  <ion-label>Service type</ion-label>
  <ion-select [(ngModel)]="serviceName" >
    <ion-option value="{{x.name}}" *ngFor="let x of servicelist">{{x.name}}</ion-option>
  </ion-select>
</ion-item>

<button ion-button (click)="addService()"> Add service</button>

enter image description here

1
angulartypescriptionic2
can you make it clearer? like what should happen exactly, what do you want to pass? – maha
in addService(), you could just get by this: this.serviceName.id – Rhadamez Gindri Hercilio
(click)="addService(serviceName)" ? Otherwise why would you use a [(ngModel)] ? – user4676340
i want to pass x.name and x.id on click "Add service" button. – Sandip Moradiya
You should wrap the whole thing into a form and work with the form values when submitting using the button. – masimplo

1 Answers

3
votes

You can do following:

<ion-item>
  <ion-label>Service type</ion-label>
  <ion-select [(ngModel)]="selectedService" >
    <ion-option [value]="x" *ngFor="let x of servicelist">{{x.name}}</ion-option>
  </ion-select>
</ion-item>

<button ion-button (click)="addService(selectedService)"> Add service</button>
selectedService