Как просмотреть выбранные элементы в полном списке компонента ion-select?

У меня есть список карт и я получаю json с сервера в такой структуре:

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

поэтому объект object1 имеет отношения "многие ко многим" с объектом в listOfObjects. И я получаю только те объекты, которые связаны отношениями с моим основным объектом обзора.

Чтобы просмотреть эти связанные объекты, я использую компонент ion-select из ionic 4. И мне нужно отметить как выбранный только связанный объект из всех объектов. для напр.

Full list of objects
obj1
obj2
obj3
obj4

Объекты, связанные с основной моделью

  • obj1
  • obj2

А в ion-select будет так

  • obj1 [выбрано]
  • obj2 [выбрано]
  • obj3
  • obj4

Как я могу это получить ???

projectService.projectsList >> получить весь проект с сервера sprintService.selectedSprint.projects >> связанные проекты с sprint

Пожалуйста, дайте мне любую альтернативу для этой проблемы, если это невозможно с ion-select ... Всем спасибо.

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

angular ionic3 ionic4 ion-select angular-ngmodel
person Eugene Vajda    schedule 27.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить функцию сравнения и, таким образом, убедитесь, какие проекты выбраны. Что-то вроде этого.

<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;
}
person Remi Sture    schedule 28.03.2019
comment
Я уже пробовал этот метод, но у меня была такая ошибка: не могу выполнить привязку к 'compareWith', поскольку это не известное свойство 'ion-select'. 1. Если 'ion-select' является компонентом Angular и у него есть вход 'compareWith', убедитесь, что он является частью этого модуля. 2. Если ion-select является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение. ..... бла бла Я видел эту проблему, но не знаю, как ее исправить :( проблема, связанная с этой ошибкой - person Eugene Vajda; 28.03.2019
comment
Похоже, вы используете более старую версию Ionic 4. compareWith был добавлен в версии 4.1.0. Ref. github.com/ionic-team/ionic/releases/tag/v4. 1.0 - person Remi Sture; 28.03.2019
comment
Да! Работает после npm i @ ionic / angular ›› и обновлено до версии 4.1.2. Ionic Framework. Спасибо, Реми !!!! - person Eugene Vajda; 28.03.2019