What’s the best way for me to get both selected value and display the image once the user hit the button?
<ion-header>
<ion-navbar color="primary">
<ion-title>
Search
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="mybg">
<ion-list>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming1" (ionChange)='valuechange(gaming1)'>
<ion-option *ngFor="let item of allList" [value]="item.values">{{item.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Gaming</ion-label>
<ion-select [(ngModel)]="gaming2">
<ng-container *ngFor="let item of allList">
<ion-option [value]="item.values" *ngIf="item.flag==0">{{item.name}}</ion-option>
</ng-container>
</ion-select>
</ion-item>
</ion-list>
<button ion-button block (click)="getData(gaming1 + gaming2)">Passin Data</button>
</ion-content>
Component:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
@Component({
selector: 'page-search',
templateUrl: 'search.html'
})
export class SearchPage {
public allList: any;
public endPlaces: any;
_imageViewerCtrl: ImageViewerController;
constructor(public navCtrl: NavController, imageViewerCtrl: ImageViewerController){
this._imageViewerCtrl = imageViewerCtrl;
this.allList=[{
name:'NES',
values:'nes',
flag:0
},{
name:'Nintendo64',
values:'n64',
flag:0
},{
name:'PlayStation',
values:'ps',
flag:0
}];
this.endPlaces=[{
name:'Dota',
values:'nesn64',
image:'assests/img/dotajpg'
},{
name:'CSGO',
values:'nesps',
image:'assets/img/csgo.jpg'
},{
name:'Overwatch',
values:'nes',
image:'assets/img/overwatch.jpg'
}]
}
valuechange(key){
for(let i = 0 ; i < this.allList.length ; i++){
if( this.allList[i].values==key){
this.allList[i].flag=1;
}else{
this.allList[i].flag=0;
}
}
}
getData(selectedValue){
for(let i = 0 ; i < this.endPlaces.length ; i++){
if( this.endPlaces[i].values==selectedValue){
console.log("Selected", this.endPlaces[i].name);
}else{
console.log("dangggg");
}
}
}
}