第一步：建立新專案，用來做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'
        }
    }
};