Ionic Selectable v5(alpha)版本已经到来

适用于原生JavaScript的`@ionic-selectable/core`

适用于Angular的`@ionic-selectable/angular`

使用stencil构建
Web组件
支持原生JavaScript
支持Angular
即将支持其他框架！！！
更多信息

Ionic Selectable

演示 | 功能 | 入门指南 | [常见问题](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#faq | [文档](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki

这是一个类似于Ionic Select的Ionic组件，允许搜索项目，包括异步搜索、无限滚动等功能。

iOS演示

单项选择
[多项选择](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#ismultiple
搜索项目
异步搜索项目
按多个项目字段搜索
表单
无限滚动
虚拟滚动
[模板](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#templates
[项目分组](https://github.com/eakoriakin/ionic-selectable/blob/main/../..//wiki#grouping
[编辑、添加和删除项目](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#editing
[禁用项目](https://github.com/eakoriakin/ionic-selectable/blob/main/../../wiki#disableditems

开始使用

安装。

// Ionic 3
npm install ionic-selectable@3.5.0 --save

// Ionic 4
npm install ionic-selectable@4.8.0 --save

// Ionic 7 with Angular 16 独立组件
npm install ionic-selectable@5.0.2 --save

导入。首先，在通常位于 src\app\app.module.ts 的 app.module.ts 中导入 IonicSelectableModule。

import { IonicSelectableModule } from 'ionic-selectable';

@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

对于 Angular 16 独立组件

import { IonicSelectableComponent } from 'ionic-selectable';

@Component({
    ...,
    standalone: true,
    imports: [IonicSelectableComponent]
})

**注意：**此外，如果你使用的是 Ionic 3+，你可能还在使用延迟加载页面。检查你的页面是否有模块文件，例如 home.module.ts，如果有，也要在每个页面模块中导入 IonicSelectableModule。

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

添加到模板。

<ion-item>
  <ion-label>端口</ion-label>
  <ionic-selectable
    item-content // 仅 Ionic 3 需要。
    [(ngModel)]="port"
    [items]="ports"
    itemValueField="id"
    itemTextField="name"
    [canSearch]="true"
    (onChange)="portChange($event)">
  </ionic-selectable>
</ion-item>

配置。

import { IonicSelectableComponent } from 'ionic-selectable';

class Port {
  public id: number;
  public name: string;
}

@Component({ ... })
export class HomePage {
  ports: Port[];
  port: Port;
constructor() {
  this.ports = [
    { id: 1, name: '东海' },
    { id: 2, name: '符拉迪沃斯托克' },
    { id: 3, name: '纳夫拉基' }
  ];
}

portChange(event: {
  component: IonicSelectableComponent,
  value: any
}) {
  console.log('港口:', event.value);
}
}