【问题标题】:How to view selected items in full list of ion-select component?如何查看离子选择组件完整列表中的选定项目?
【发布时间】:2019-03-27 13:38:34
【问题描述】:

我有一张卡片列表,并从服务器获取 json 格式:

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

所以 object1 与 listOfObjects 中的对象有多对多的关系。 而且我只得到与我的主要视图对象的关系相关的对象。

要查看此链接对象,我使用 ionic 4 的 ion-select 组件。 我需要从所有对象中勾选仅选​​择链接对象。例如。

Full list of objects
obj1
obj2
obj3
obj4

链接到主模型的对象

  • obj1
  • obj2

在离子选择中它会是这样的

  • obj1 [已选]
  • obj2 [已选择]
  • obj3
  • obj4

我怎么能得到它???

projectService.projectsList>> 从服务器获取所有项目 sprintService.selectedSprint.projects >> 将项目链接到 sprint

如果使用离子选择无法解决此问题,请给我任何替代方案...谢谢大家。

<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 angular-ngmodel ionic4 ion-select


    【解决方案1】:

    尝试添加比较功能,这样可以确定选择了哪些项目。像这样。

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

    【讨论】:

    • 我已经尝试过这种方法,但我遇到了这样的错误:无法绑定到“compareWith”,因为它不是“ion-select”的已知属性。 1. 如果 'ion-select' 是一个 Angular 组件并且它有 'compareWith' 输入,那么验证它是这个模块的一部分。 2. 如果“ion-select”是一个 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ..... bla bla 我看到了这个问题,但不知道如何解决它:( issue about this error
    • 听起来您使用的是旧版本的 Ionic 4。compareWith 是在 4.1.0 版中添加的。参考。 github.com/ionic-team/ionic/releases/tag/v4.1.0
    • 是的!它在 npm i @ionic/angular >> 之后工作并更新到 4.1.2 版本。离子框架。谢谢雷米!!!!
    猜你喜欢
    • 2022-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-15
    • 2018-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多