从零开始在Angular 6中使用ng2-smart-table组件中的LocalDataSource

版权声明：本文为博主原创文章，未经博主允许不得转载。 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'
        }
    }
};