Creating a selection tool with list inside (Array)

Ionic Framework ionic-v3
1

I wanted to create 2 list of ion-item, like this:

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

but my question is, is it possible that I want the ion-option to be in a list of arrays so that the 2nd list of item will only show ion-option that are not selected from the 1st one.

e.g.: 1st list NES where selected so the 2nd list will only show Nintendo64 and PlayStation

2

Hi, @EzzatLiao

  <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>

Component:

export class HomePage {
  
    public allList:any;

  constructor(public navCtrl: NavController) {
    this.allList=[{
      name:'NES',
      values:'nes',
      flag:0
    },{
      name:'Nintendo64',
      values:'n64',
      flag:0
    },{
      name:'PlayStation',
      values:'ps',
      flag:0
    }];

  }
  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;
        }
      }
    
  }

}

Hope, this will resolve your issue

Thanks,

1 Like
4

OMG thank you, this really solve my issue, but I’m having a new issue with it. So I want to display the selected data on a button, like this:
<button ion-button block (click)="getData(gaming1, gaming2)">PassingData</button>

Component:

getData(selectedValue){
    console.log("Selected", selectedValue);
  }

But it only take the 1st value only.

edit: Wait, it should be like this right (click)="getData(gaming1 + gaming2)"

5

I would do this differently.

<ion-item>
<ion-select [(ngModel)]="console1">
  <ion-option *ngFor="let console of consoles" [value]="console">{{console.displayName}}</ion-option>
</ion-select>
</ion-item>

<ion-item>
<ion-select [(ngModel)]="console2">
  <ng-container *ngFor="let console of consoles">
    <ion-option *ngIf="console.name !== console1.name" [value]="console">{{console.displayName}}</ion-option>
  </ng-container>
</ion-select>
</ion-item>

You don’t need the flag property, you don’t need the change handler, you don’t need to pass anything to your button click handler: everything you need is already in console1 and console2.

6

Having error with it , Runtime Error Cannot read property 'name' of undefined

7

Well, obviously you have to have the objects in the consoles entries have the relevant properties to match the template syntax.

8

I already did change it

9

And presumably you initialized console1 and console2 to at least empty objects? You can’t leave them undefined.

EDIT: I changed the bound property to be the entire object instead of the name.

10

Can you show me how? I dont get it, sorry.

11

Whenever you declare an object or array property that is accessed in the template, give it an initializer. The simplest ones are:

foo = {} as Foo;
bars = [] as Bar[];

So in your case, make sure console1 is initialized to at least {} as whatever type your console object is.

12

I assumed template is in .ts file?