Search code examples
angularionic3angular-ngmodelionic4ion-select

How to view selected items in full list of ion-select component?


I have a list of cards and get json from server in such structere:

object1 : {
  prop1 : ''
  listOfObjects : []
}

so object1 has many to many relationship with object in listOfObjects. And i get only objects that linked with relationship with my main object of view.

To view this linked objects i use ion-select component of ionic 4. And i need to tick as selected only linked object from all objects. for eg.

Full list of objects
obj1
obj2
obj3
obj4

Objects that linked to main model

  • obj1
  • obj2

And in ion-select it will be like that

  • obj1 [selected]
  • obj2 [selected]
  • obj3
  • obj4

How i can get it???

projectService.projectsList>> get all project from server sprintService.selectedSprint.projects >> linked projects to sprint

Please give me any alternative for this issue if it is imposible with ion-select... Thanks all.

<ion-select #projects ngModel name="projects" [(ngModel)]="sprintService.selectedSprint.projects"
                    multiple="true">
                    <ion-select-option *ngFor="let project of projectService.projectsList" [value]="project">
                      {{project.name}}
                    </ion-select-option>
                  </ion-select> 

my model
export class Sprint{
    id : number;
    name : string;
    description : string;
    startDate : string;
    endDate : string;
    priority : number;
    projects : Project[]
}

export class Project{
    id : number;
    name : string;
    description : string;
    startDate : string;
    endDate : string;
}

Solution

  • Try adding a compare function, and that way be sure what projects are selected. Something like this.

    <ion-select [(ngModel)]="projects" multiple="true" [compareWith]="compareObject">
       <ion-select-option *ngFor="let p of sprintService.selectedSprint.projects" [value]="p">{{p.name}}</ion-select-option>
    </ion-select>
    
    compareObject(a: any, b: any) {
       return a.id === b.id;
    }