6.3.5 動態分頁 · Angular入門實例教程

當前我們實現了3個靜態的分頁，很明顯這是有問題的。在現實的項目中，不可能固定的有3內容，也就是說頁碼必然是動態變化的。而我們則需要適應各種變化。一個比較簡單的辦法是根據總頁數來建立一個數組，然后在V層中循環這個數組： ## 分頁數組我們仍然使用step by step的方式來開發動態分頁功能，在此先在C層新建一個分頁數組： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -16,6 +16,9 @@ export class ClazzComponent implements OnInit { // 每頁默認為3條 size = 3; + // 分頁數組 + pages = [0, 1, 2, 3, 4, 5, 6, 7, 8]; + // 初始化一個有0條數據的 pageData = new Page<Clazz>({ ``` 然后在C層來循環這個數組，當前V層分頁代碼如下： ```html <ul class="pagination col-md-auto"> <li [ngClass]="{disabled: page === 0}" class="page-item">上一頁</li> <li [ngClass]="{active: page === 0}" class="page-item">1</li> <li [ngClass]="{active: page === 1}" class="page-item">2</li> <li [ngClass]="{active: page === 2}" class="page-item">3</li> <li [ngClass]="{disabled: page === 2}" class="page-item">下一頁</li> </ul> ``` 將原頁碼變更為循環輸出，變更后代碼如下： ```html <ul class="pagination col-md-auto"> <li [ngClass]="{disabled: page === 0}" class="page-item">上一頁</li> <li *ngFor="let p of pages" [ngClass]="{active: page === p}" class="page-item"> {{p + 1}} </li> <li [ngClass]="{disabled: page === 2}" class="page-item">下一頁</li> </ul> ``` 上述代碼對`pages`進行了循環，使用`ngClass`來設置了`class`值，將`p`的值傳入了`onPage()`方法，最后使用插值表達式來輸出了當前頁碼(1基)。 ![image-20210331110849794](https://img.kancloud.cn/2d/56/2d56580084cbeafc5b811e0a99343244_1020x140.png) ## 生成數組根據數組動態生成分頁后，便可以再依據httpClient的返回來動態地生成分頁數組了: ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -45,6 +45,11 @@ export class ClazzComponent implements OnInit { this.page = page; this.pageData = pageData; console.log(pageData); + // 根據返回的值生成分頁數組 + this.pages = []; + // for (let i = 0; i < pageData.總頁數; i++) { + // this.pages.push(i); + // } }); } } ``` 如上，如果pageData上存在一個`總頁數`，便能實現當下的功能。寫到這里，突然的發現在前面寫`Page`類時，由于自己的疏忽忽略了代表**總頁數**的`totalPages`屬性。 ### 解決BUG 找到`entity`文件夾中的`Page`類，添加`totalPages`屬性，并在構造函數中完成對其的初始化： ```typescript +++ b/first-app/src/app/entity/page.ts @@ -9,6 +9,7 @@ export class Page<T> { size: number; numberOfElements: number; first: boolean; + totalPages: number; constructor(data: { content: T[], @@ -16,7 +17,8 @@ export class Page<T> { number: number, size: number, numberOfElements: number, - first?: boolean + first?: boolean, + totalPages?: number; }) { this.content = data.content; this.number = data.number; @@ -33,5 +35,13 @@ export class Page<T> { } else { this.first = this.number === 0 ? true : false; } + + if (data.totalPages !== undefined) { + this.totalPages = data.totalPages; + } else { + // Math.ceil()實現上取整，比如共10條記錄，每頁6條，則 10 / 6 = 1.x + // Math.ceil(1.x) = 2 得出共2頁 + this.totalPages = Math.ceil(this.numberOfElements / this.size); + } } } ``` 測試代碼如下： ```typescript it('should create an instance', () => { // 不加入last, first初始化 let page = new Page({ number: 2, size: 20, numberOfElements: 200, content: [] }); expect(page).toBeTruthy(); expect(page.first).toBeFalse(); expect(page.last).toBeFalse(); + expect(page.totalPages).toBe(10); // 第1頁，首頁 page = new Page({ number: 0, size: 20, numberOfElements: 192, content: [] }); expect(page.first).toBeTrue(); expect(page.last).toBeFalse(); + expect(page.totalPages).toBe(10); // 共41條數據，當前第3頁，每頁20條，所以當前頁為尾頁 page = new Page({ number: 2, size: 20, numberOfElements: 41, content: [] }); expect(page.first).toBeFalse(); expect(page.last).toBeTrue(); + expect(page.totalPages).toBe(3); }); ``` ## 使用總頁數分頁信息中存在總頁數后，便可以取消C層相應的注釋，從而完成根據總頁數來動態生成分頁數組了： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -47,9 +47,9 @@ export class ClazzComponent implements OnInit { console.log(pageData); // 根據返回的值生成分頁數組 this.pages = []; - // for (let i = 0; i < pageData.總頁數; i++) { - // this.pages.push(i); - // } + for (let i = 0; i < pageData.totalPages; i++) { + this.pages.push(i); + } }); } } ``` 此時當我們點擊分頁信息時，將會重新請求后臺，并按后臺返回的數據情況動態生成分頁: ![image-20210331140301030](https://img.kancloud.cn/ee/ad/eead25a5e5526d8d00cd74f886da140c_1160x150.png) ## 代碼修正重構最后讓我們對代碼進行修正，以移除開發痕跡。然后進行重構，以不制造重復的輪子。 ### 修正我們初始化了大小為9的分頁數組，當初這樣做是為了分步開發，此時我們將其修改為空數組： ```typescript // 分頁數組 - pages = [0, 1, 2, 3, 4, 5, 6, 7, 8]; + pages = [] as number[]; ``` 當把一個數組初始化為空數組時，由于數組中是空的，所以typescript無法推斷出我們為數組指定的元素的類型（比如我們當前想初始化一個存放number的類型），在此使用`as number[]`來告知typescript數組中存放元素的類型為number。 ### 重構我們`ngOnInit()`及`onPage()`方法中，使用不同的`page`調用了相同的后臺地址，這導致兩個方法中的代碼大體相同。由于重復代碼的存在，使得增加某些功能時要進行多次處理。比如接收到后臺的分頁數據后，根據總頁碼數初始化分頁數組。如果重構為一個方法，則會使日后的修改、維護變得更簡單，為此在組件中創建一個新的方法，并接修收`page`參數： ```typescript loadByPage(page = 0): void { } ``` 上述代碼中我們使用`page = 0`的方式為參數`page`設置了一個默認值。接著將`onPage()`的方法體內容遷移過來： ```typescript loadByPage(page = 0): void { const httpParams = new HttpParams().append('page', page.toString()) .append('size', this.size.toString()); this.httpClient.get<Page<Clazz>>('/clazz/page', {params: httpParams}) .subscribe(pageData => { // 在請求數據之后設置當前頁 this.page = page; this.pageData = pageData; console.log(pageData); // 根據返回的值生成分頁數組 this.pages = []; for (let i = 0; i < pageData.totalPages; i++) { this.pages.push(i); } }); } ``` 最后刪除原`ngOnInt()`、`onPage()`方法中原有的代碼，添加對`loadByName()`方法的調用： ```typescript ngOnInit(): void { // 使用默認值 page = 0 調用loadByPage()方法 this.loadByPage(); } onPage(page: number): void { this.loadByPage(page); } ``` 如此以來`loadByPage()`則是我們造的唯一的輪子，這使日后修改、維護起來都會更加簡單。 ### disable 最后完成上一頁、下一頁的disabled。利用后臺返回的`pageData`，這個功能變得很簡單：如果是第一頁，則disabled上一頁；如果是最后一頁，則disabled下一頁: ```html <ul class="pagination col-md-auto"> - <li [ngClass]="{disabled: page === 0}" class="page-item">上一頁</li> + <li [ngClass]="{disabled: pageData.first}" class="page-item">上一頁</li> <li *ngFor="let p of pages" [ngClass]="{active: page === p}" class="page-item"> {{p + 1}} </li> - <li [ngClass]="{disabled: page === 2}" class="page-item">下一頁</li> + <li [ngClass]="{disabled: pageData.last}" class="page-item">下一頁</li> </ul> </nav> ``` 好了，愉悅的欣賞自己的杰作吧。 ## 本節作業 1. 恢復代碼至上節的內容，完成動態分頁功能 2. 當前ClazzMockApi在返回總頁數時，返回的是10。將其修改為8，15，100試試 3. 請思索當前分頁功能還存哪些不完善的地方，憑自己的能力嘗試完善它 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.5.zip) |