angular material 框架使用步驟(以及分頁欄自定義)
我喜歡直接給程式碼或者截圖說明,所有的口頭上說的都是垃圾,解決不了問題
注:先吐槽一下angular material這個垃圾官網,真的是坑,如果你按照他的方法那就等著吃屎吧
開始:
1.在控制檯埠輸入:npm install --save @angular/material @angular/cdk
2.在你的package.json檔案裡把上一步下載的版本更改為(只能使用這兩個版本,不然你會走和我一樣的彎路):
"@angular/cdk": "^5.0.0-rc.3"
"@angular/material": "^5.0.0-rc.3"
3.在控制檯埠輸入: npm install
4.在你想引用material功能或者樣式的地方的Module檔案下,直接複製上去:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { QuestionComponent, questionAdd, MatPaginatorIntlCro } from './question/question.component';
import { BrowsersComponent } from './browsers.component';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '@angular/material';
import {HttpModule} from '@angular/http';
import {CdkTableModule} from '@angular/cdk/table';
import { MatPaginatorIntl} from '@angular/material';
//換行繼續新增:
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
]
})
export class DemoMaterialModule {}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
CommonModule,
ShareModule,
RouterModule.forChild(settingroutes),
PaginationModule.forRoot(),
NgxPaginationModule
],
entryComponents: [BrowsersComponent,questionAdd,planWindow],
declarations: [BrowsersComponent,questionAdd,planWindow],
bootstrap: [BrowsersComponent,questionAdd,planWindow]
})
export class BrowsersModule { }
配圖:這個檔案。
5.然後在你想要加mdl(也就是angular material)的conmponent中加入對應的元件
比如:我加的
6,完成 ,執行; 輸入:npm start
angular material修改分頁顯示
1.在conmponent最下方新增,
export class MatPaginatorIntlCro extends MatPaginatorIntl {
itemsPerPageLabel = '當前頁數';
nextPageLabel = '下一頁';
previousPageLabel = '上一頁';
getRangeLabel = function (page, pageSize, length) {
if (length === 0 || pageSize === 0) {
return '0 od ' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return '第' + (startIndex + 1) + ' - ' + endIndex + ' 條,總共:' + length + '條';
};
}
配圖:
2.繼續在這個檔案上方新增 import { MatPaginator, MatPaginatorIntl } from '@angular/material';
3.在這個檔案對應的Module檔案裡新增
import { MatPaginatorIntl} from '@angular/material';
import { QuestionComponent, questionAdd, MatPaginatorIntlCro } from './question/question.component';(這裡我是在question.component.ts裡新增的這個,所以這裡是需要從這個元件引入)
4.在有 imports 的NgModule裡,新增providers,就搞定了
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}]
5.完成,搞定。npm start.
如果我有幫助到你,那就隨手給我一個贊吧~
相關推薦
angular material 框架使用步驟(以及分頁欄自定義)
我喜歡直接給程式碼或者截圖說明,所有的口頭上說的都是垃圾,解決不了問題 注:先吐槽一下angular material這個垃圾官網,真的是坑,如果你按照他的方法那就等著吃屎吧 開始: 1.在控制檯埠輸入:npm install --save @angular/materia
SSH框架整合(實現分頁查詢)
SSH框架整合、分頁查詢案例之前已經寫過了SSM框架的分頁查詢案例,剛翻筆記時看到了以前寫過的SSH分頁查詢的功能的筆記,這裡就也再整理一下嘍,送給那些在學習SSH框架的同學,SSH框架因為用的Hibernate,所以與SSM有所不同,希望這個小案例能對大家有所幫助。<
C# DataGridView分頁功能(SQL分頁儲存過程實現)
{ dtStaff.Clear(); SqlConnection conn = new SqlConnection(Param_Class.Param_DB.strConn); SqlDataAdapter Sda = new SqlDataA
使用pager外掛實現分頁簡易使用示例(後臺分頁,前臺顯示)
function getSendMessageInfo() { //初始化首頁顯示 var paramObj = { "pageNum":"1"
Python之路65-Django分頁、自定義分頁
python目錄一、XSS二、分頁1三、分頁2四、分頁3一、XSS有下面一段代碼,想將這段代碼中的字符串渲染到HTML頁面中,默認Django是不能這樣去操作的views.pydef user_list(request): page_str = """ <a href="/use
python/Djangof分頁與自定義分頁
from r+ else active count() 返回 log 多少 pan python/Djangof分頁與自定義分頁 Django分頁 1 ##============================================分頁========
TP框架調用ajax 以及分頁的引用
stat 之前 str 讀取 text 指向 spa 空間 ati thinkphp使用ajax和之前使用ajax的方法一樣,不同點在於之前的ajax中的url指向了一個頁面,而thinkphp裏面的url需要指向一個操作方法。 一、thinkphp使用ajax返回數據
Spring Boot 整合 Mybatis(druid 資料庫連線池 以及 分頁配置)
MyBatis 是一款優秀的持久層框架,它支援定製化 SQL、儲存過程以及高階對映,目前很大一部分網際網路、軟體公司都在使用這套框架 下來來之後,我們主要關注幾個檔案 配置檔案:generator.properties 主要是資料庫的相關配置,以及檔案生成的根路徑 generator.jdbc.drive
分頁demo 前端+後臺 (union 與union all 的區別 以及分頁limit,offset的應用)
記重點 1.UNION去重且排序,UNION ALL不去重不排序。 2. sql 中 limit 與 limit,offset連用的區別 ① select * from table limit 2,1;  
mybatis的通用Mapper外掛以及分頁外掛(2018/1/17)
SSM框架 spring4.0.2+mybatis3.2.6 maven工程 不會搭建框架的小哥們請自行前往這個大神的部落格搭建,本博文只針對於通用mapper外掛 廢話不多說 首先引入依賴(版本我用的都是最新的): 程式碼塊中有左邊這個span標籤,我不知道怎麼弄了去
yii框架中,搜尋的表單和後臺執行,以及分頁
/** * 管理員搜尋檢視那些課程 * 分頁顯示 * 多條件搜尋 * */ public function actionSearch(){ //接搜尋傳過來的值 $data=yii::$app->request-&
Java操作Hbase增刪改查(附帶複合條件查詢以及分頁查詢)
最近專案中用到了Hbase,所以看了下Java操作Hbase的有關API,並根據專案中的需求寫了下增刪改查。閒話少說,先貼原始碼: package com.infobird.test1; import java.io.IOException; import java
自己實現的資料表格控制元件(dataTable),支援自定義樣式和標題資料、ajax等各種自定義設定以及分頁自定義
一、前言 也沒什麼好說的嘛,用了蠻多github上開源的能夠實現dataTable功能的表格外掛,不過都預設繫結樣式啊,資料格式也設定的比較死,所以忍不住自己實現了一個簡單的可自定義樣式和自定義資料返回格式的資料表格外掛,原生js是保留的,後面如果更新新版本的話會去除對jq
分頁控件以及分頁控件風格
size .net rstp weight sans current input aging 人的 原文發布時間為:2009-05-22 —— 來源於本人的百度文章 [由搬家工具導入]分页控件以S
分頁(將數據庫中的信息分頁顯示到網頁)
gen ets arr get ges nec 記錄 方法 logs 問題分析: 當我們想檢索數據庫中的信息並將其顯示到網頁上時,如果數據庫中的信息過多時 。一方面會使數據庫開銷非常大,降低性能;另一方面在一張頁面上顯示過多數據也會降低用戶體驗。 解決辦法:
springboot 引入mybaits 以及分頁插件
inf 圖片 mybaits num 傳遞 urn sarg doc nts 一、pom <dependency> <groupId>org.mybatis.spring.boot</groupId&g
layui的分頁使用(前端分頁)
app value ner str sda msg urn mes function <div id="one"></div>//顯示數據庫中數據的<ul id="ones"></ul>//顯示分頁的 ============
rest-framework框架 -- 解析器、分頁、路由
表示 color 組件 elf post data ... rest art rmp 解析器 :reqest.data取值的時候才執行 對請求的數據進行解析:是針對請求體進行解析的。表示服務器可以解析的數據格式的種類 django中的發送請求 #如果是這樣的格式發送的數據
飛思卡爾MC9S12系列單片機地址影射以及分頁問題
flash 方式 優先 獲得 機制 再看 這就是 範圍 基本上 對於用MCU的人來說,不一定要明白HCS12(x) memory map的機制和聯系。因為如果沒有系統地學習操作系統和編譯原理之類的課程,確實有些難度。並且,對於DG128 XS128這樣的MCU,默認的e
Java開發中,通過sql來實現過濾以及分頁
我們通過一個需求來引入問題。 首先,簡單介紹一下需求:實現一個下圖的頁面,包含了過濾以及分頁。資料是後臺資料庫獲得到的。 那麼關於如何實現過濾以及分頁,考慮到通過前臺實現或者後臺實現,我們不妨來分析一下兩種方法。 首先,前臺實現:無非就是後臺獲取所有的list,傳