版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhy13087344578/article/details/82984889
ng2-smart-table 源码:ng2-smart-table
第一步:创建新项目,用来做demo
步骤一:创建新项目
ng new demo-ng2-smart-table
步骤二:下载依赖包
npm i
步骤三:下载ng2-smart-table 及相关的依赖项
npm install ng2-smart-table --save
npm install ng2-completer --save
npm install rxjs-compat --save
第二步:在demo中使用ng2-smart-table
步骤一:创建localsource组件和serversource组件
ng g c demoLocalSource
ng g c demoServerSource
步骤二:添加路由 app-routing.module.ts
import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { DemoLocalSourceComponent } from './demo-local-source/demo-local-source.component';
import { DemoServerSourceComponent } from './demo-server-source/demo-server-source.component';
const routes: Routes = [
{ path: 'local', component: DemoLocalSourceComponent },
{ path: 'server', component: DemoServerSourceComponent },
{ path: '', redirectTo: 'local', pathMatch: 'full' },
{ path: '**', redirectTo: 'local' }
];
const config: ExtraOptions = {
useHash: true
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
app.html
<div style="text-align:center">
<h1> Welcome to {{ title }}! </h1>
</div>
<ul>
<li>
<h2><a [routerLink]="['/local']" routerLinkActive="active">LocalSource</a></h2>
</li>
<li>
<h2><a [routerLink]="['/server']" routerLinkActive="active">ServerSource</a></h2>
</li>
</ul>
<div>
<router-outlet></router-outlet>
</div>
这时候,页面是这样的
步骤三:添加ng2-smart-table模块
import { Ng2SmartTableModule } from 'ng2-smart-table';
demo-local-source(关键代码)
html
template: `<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>`,
ts
data =
[{
id: 5,
name: 'Chelsey Dietrich',
email: '[email protected]',
}];
settings = {
actions: {
add: false,
edit: false,
delete: false
},
columns: {
id: { //与data中的字段一定要对应
title: 'ID'
},
name: {
title: 'Full Name'
},
email: {
title: 'Email'
}
}
};