可以使用 angular-datatables-ionic 依赖库来实现该功能。该依赖库提供了对 Ionic 组件的支持。
安装以下 npm 包:
npm install --save angular-datatables
npm install --save angular-datatables-ionic
在 app.module.ts 中导入 DataTablesModule 和 DataTablesIonicModule:
import { DataTablesModule } from 'angular-datatables';
import { DataTablesIonicModule } from 'angular-datatables-ionic';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
DataTablesModule,
DataTablesIonicModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
在组件中使用 ion-row 和 ion-col:
name
position
office
{{person.name}}
{{person.position}}
{{person.office}}
注意:需要加上 ion-col 来支持 Ionic 组件。