從零開始在Angular 6.x 中使用ng2-smart-table元件中的LocalDataSource
第一步:建立新專案,用來做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'
}
}
};
相關推薦
從零開始在Angular 6.x 中使用ng2-smart-table元件中的LocalDataSource
第一步:建立新專案,用來做demo 步驟一:建立新專案 ng new demo-ng2-smart-table 步驟二:下載依賴包 npm i 步驟三:下載ng2-smart-table 及相關的
從零開始學 Web 之 Ajax(六)jQuery中的Ajax
var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web
從零開始Tableau | 6.分層與分組
在tableau中,資料分層與資料分組常用來對維度欄位之間或者維度欄位內部進行資料的重新組織。本節記錄要點: 資料分層 資料分組 資料分層 資料分層是一種維度欄位之間自上而下的組織形式,tableau中預設包含了一些特殊欄位的分層結
從零開始學習HTML+CSS(4)Flex佈局中的排列與換行
0.參考網址:https://www.runoob.com/w3cnote/flex-grammar.html 1.排列 預設值:橫向排列(從左邊開始排) div { display:flex;/*設定為flex佈局*/ flex-direction:row;/*這
JAVA從零開始學習(6)
一、Java正則表示式 正則表示式定義了字串的模式 正則表示式可以用來搜尋、編輯或處理文字 正則表示式並不僅限於某一種語言,但是在某種語言中有細微的差別 二、Java方法 System.out.println() println()是一個方法 System是系統
從零開始的RxJava2.0教程(四)在安卓中的應用
1. 前言 2. RxAndroid RxAndroid是RxJava針對Android平臺的擴充套件庫。 曾幾何時,RxAndroid確實提供了很多的實用的方法,但後來社群上很多人對這庫的結構有意見,然後作者便進行了重構,現在只保留了Androi
從零開始用webpack4.x建立一個react(三)
webpack都已經配置好了,我們現在要來將react引入 因為react用到的是jsx語法,所以我們要用到babel 執行 `npm i babel-core [email protected] babel-plugin-transform-runtime -
Vue+ElementUI從零開始搭建自己的網站(三、元件間的通訊)
前面討論了環境的搭建和導航頁面以及路由的配置,今天我們討論下如何開發一個擁有表單和表格功能的頁面。先上開發完的效果圖: 可以看出頁面非常的簡單,其中上半部分是表單搜尋和查詢,下半部分是用於展示資料的表格。如果按照傳統的開發思路,其實非常簡單,只要用兩個div,第一個d
SD從零開始67-70 後勤信息系統中的標準分析, 信息結構, 信息的更新規則, 建立統計數據
str 類型 計數 移動 菜單 生成 porting 詳細信息 更換 SD從零開始67 後勤信息系統中的標準分析 標準分析中的報表Reporting in Standard Analyses 標準分析為高質量的表達和分析LIS中的數據基礎提供了大量的功能; 當
從零開始學習前端開發 — 6、CSS寬高自適應
完全 content 代碼 部分 隱藏 -h 描述 tex tom 一、寬度自適應 語法:width:100%; 註: a)塊狀元素的默認寬度為100% b) 當給元素設置寬度為100%時,繼承父元素的寬度 c) 通常使用寬度自適應實現通欄效果 二、高度自適應 語法:hei
從零開始搭建系統3.6——基礎配置組件開發
基礎配置 www. .cn blog logs href 組件開發 gpo com 從零開始搭建系統3.6——基礎配置組件開發從零開始搭建系統3.6——基礎配置組件開發
從零開始搭建系統1.6——Https證書安裝及配置
.com pro 證書安裝 https證書 http get 安裝 href .html 從零開始搭建系統1.6——Https證書安裝及配置從零開始搭建系統1.6——Https證書安裝及配置
從零開始學大數據-Java基礎-switch語句(6)
大數據 Java CCIE 從零開始學大數據 我們從零開始學習大數據技術,從java基礎,到Linux技術涉獵,再深入到大數據技術的Hadoop、Spark、Storm技術,最後到大數據企業平臺的搭建,層層遞進,由點到面!希望技術大牛能過來指導學習。上一節學習了流程控制語句,本節學習switc
從零開始搭建口袋妖怪管理系統(1)-從Angular1.x開始
style ppc href rip initial 官方庫 從零開始 table 技術分享 開坑,一直喜歡口袋妖怪,想著能寫點有關的程序。 最近項目要改寫管理系統,所以用Angular1.x搭建一個口袋妖怪管理系統試試。 鞏固Ng1.x的知識+學習庫的用法,然後算是記錄一
從零開始搭建linux下laravel 5.6環境(一)
yum acad 分享圖片 tps .html 啟動 服務 all 從零開始 首先你需要有一臺linux服務器,或者虛擬機,這裏就不贅述了,不會的可以自行百度。 我這裏準備的是一臺騰訊雲服務器,系統為CentOS 7.4 64位。 你可以使用騰訊雲的登錄按鈕登錄到服務器 也
從零開始的全棧工程師——html篇1.6
標準 hidden position margin 區別 ext alt 效果 posit 浮動與偽類選擇器 一、浮動(float) 1.標準文檔流 標準文檔流是一種默認的狀態 瀏覽器的排版是根據元素的特征(塊和行級) 從上往下 從左往右排版 這就是標準文檔流 2
[Golang] 從零開始寫Socket Server(6)【完結】:日誌模組的設計與定時任務模組模組
好久沒寫文章啦。。。今天把golang挖的這個坑給補完吧~ 作為一個Server,日誌(Log)功能是必不可少的,一個設計良好的日誌模組,不論是開發Server時的除錯,還是執行時候的維護,都是非常有幫助的。 因為這裡寫的是一個比較簡化的Server框架,因此我選擇對Golang本
iOS中從零開始使用protobuf
讓我們一起開啟下面這個連結 https://github.com/alexeyxo/protobuf-objc 在github上有protobuf-objc,其中的readme可以教會我們安裝proto到咱們電腦裡面。然後利用protoc,也就是pr
mpvue 從零開始 女友拉黑了我 5 不在以下request 合法域名列表中,請參考文件
上一篇,才調通了介面,試了幾次,都成功,突然,微信報錯了。 VM6239:1 https://www.easy-mock.com 不在以下 request 合法域名列表中,請參考文件:https://mp.weixin.qq.com/debug/wxadoc/dev/api/net
mpvue 從零開始 女友的髮帶 2 window中設定
女友頭上髮帶的顏色和文字是可以設定的,通過配置app.json中的window引數。 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#58A94E",