久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

當(dāng)前我們實(shí)現(xiàn)了3個(gè)靜態(tài)的分頁(yè)，很明顯這是有問(wèn)題的。在現(xiàn)實(shí)的項(xiàng)目中，不可能固定的有3內(nèi)容，也就是說(shuō)頁(yè)碼必然是動(dòng)態(tài)變化的。而我們則需要適應(yīng)各種變化。一個(gè)比較簡(jiǎn)單的辦法是根據(jù)總頁(yè)數(shù)來(lái)建立一個(gè)數(shù)組，然后在V層中循環(huán)這個(gè)數(shù)組： ## 分頁(yè)數(shù)組 我們?nèi)匀皇褂胹tep by step的方式來(lái)開(kāi)發(fā)動(dòng)態(tài)分頁(yè)功能，在此先在C層新建一個(gè)分頁(yè)數(shù)組： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -16,6 +16,9 @@ export class ClazzComponent implements OnInit { // 每頁(yè)默認(rèn)為3條 size = 3; + // 分頁(yè)數(shù)組 + pages = [0, 1, 2, 3, 4, 5, 6, 7, 8]; + // 初始化一個(gè)有0條數(shù)據(jù)的 pageData = new Page<Clazz>({ ``` 然后在C層來(lái)循環(huán)這個(gè)數(shù)組，當(dāng)前V層分頁(yè)代碼如下： ```html <ul class="pagination col-md-auto"> <li [ngClass]="{disabled: page === 0}" class="page-item"><span class="page-link">上一頁(yè)</span></li> <li [ngClass]="{active: page === 0}" class="page-item"><span class="page-link" (click)="onPage(0)">1</span></li> <li [ngClass]="{active: page === 1}" class="page-item"><span class="page-link" (click)="onPage(1)">2</span></li> <li [ngClass]="{active: page === 2}" class="page-item"><span class="page-link" (click)="onPage(2)">3</span></li> <li [ngClass]="{disabled: page === 2}" class="page-item"><span class="page-link">下一頁(yè)</span></li> </ul> ``` 將原頁(yè)碼變更為循環(huán)輸出，變更后代碼如下： ```html <ul class="pagination col-md-auto"> <li [ngClass]="{disabled: page === 0}" class="page-item"><span class="page-link">上一頁(yè)</span></li> <li *ngFor="let p of pages" [ngClass]="{active: page === p}" class="page-item"> <span class="page-link" (click)="onPage(p)">{{p + 1}}</span> </li> <li [ngClass]="{disabled: page === 2}" class="page-item"><span class="page-link">下一頁(yè)</span></li> </ul> ``` 上述代碼對(duì)`pages`進(jìn)行了循環(huán)，使用`ngClass`來(lái)設(shè)置了`class`值，將`p`的值傳入了`onPage()`方法，最后使用插值表達(dá)式來(lái)輸出了當(dāng)前頁(yè)碼(1基)。  ## 生成數(shù)組 根據(jù)數(shù)組動(dòng)態(tài)生成分頁(yè)后，便可以再依據(jù)httpClient的返回來(lái)動(dòng)態(tài)地生成分頁(yè)數(shù)組了: ```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); + // 根據(jù)返回的值生成分頁(yè)數(shù)組 + this.pages = []; + // for (let i = 0; i < pageData.總頁(yè)數(shù); i++) { + // this.pages.push(i); + // } }); } } ``` 如上，如果pageData上存在一個(gè)`總頁(yè)數(shù)`，便能實(shí)現(xiàn)當(dāng)下的功能。寫(xiě)到這里，突然的發(fā)現(xiàn)在前面寫(xiě)`Page`類時(shí)，由于自己的疏忽忽略了代表**總頁(yè)數(shù)**的`totalPages`屬性。 ### 解決BUG 找到`entity`文件夾中的`Page`類，添加`totalPages`屬性，并在構(gòu)造函數(shù)中完成對(duì)其的初始化： ```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()實(shí)現(xiàn)上取整，比如共10條記錄，每頁(yè)6條，則 10 / 6 = 1.x + // Math.ceil(1.x) = 2 得出共2頁(yè) + this.totalPages = Math.ceil(this.numberOfElements / this.size); + } } } ``` 測(cè)試代碼如下： ```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頁(yè)，首頁(yè) page = new Page({ number: 0, size: 20, numberOfElements: 192, content: [] }); expect(page.first).toBeTrue(); expect(page.last).toBeFalse(); + expect(page.totalPages).toBe(10); // 共41條數(shù)據(jù)，當(dāng)前第3頁(yè)，每頁(yè)20條，所以當(dāng)前頁(yè)為尾頁(yè) page = new Page({ number: 2, size: 20, numberOfElements: 41, content: [] }); expect(page.first).toBeFalse(); expect(page.last).toBeTrue(); + expect(page.totalPages).toBe(3); }); ``` ## 使用總頁(yè)數(shù) 分頁(yè)信息中存在總頁(yè)數(shù)后，便可以取消C層相應(yīng)的注釋，從而完成根據(jù)總頁(yè)數(shù)來(lái)動(dòng)態(tài)生成分頁(yè)數(shù)組了： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -47,9 +47,9 @@ export class ClazzComponent implements OnInit { console.log(pageData); // 根據(jù)返回的值生成分頁(yè)數(shù)組 this.pages = []; - // for (let i = 0; i < pageData.總頁(yè)數(shù); i++) { - // this.pages.push(i); - // } + for (let i = 0; i < pageData.totalPages; i++) { + this.pages.push(i); + } }); } } ``` 此時(shí)當(dāng)我們點(diǎn)擊分頁(yè)信息時(shí)，將會(huì)重新請(qǐng)求后臺(tái)，并按后臺(tái)返回的數(shù)據(jù)情況動(dòng)態(tài)生成分頁(yè):  ## 代碼修正重構(gòu) 最后讓我們對(duì)代碼進(jìn)行修正，以移除開(kāi)發(fā)痕跡。然后進(jìn)行重構(gòu)，以不制造重復(fù)的輪子。 ### 修正 我們初始化了大小為9的分頁(yè)數(shù)組，當(dāng)初這樣做是為了分步開(kāi)發(fā)，此時(shí)我們將其修改為空數(shù)組： ```typescript // 分頁(yè)數(shù)組 - pages = [0, 1, 2, 3, 4, 5, 6, 7, 8]; + pages = [] as number[]; ``` 當(dāng)把一個(gè)數(shù)組初始化為空數(shù)組時(shí)，由于數(shù)組中是空的，所以typescript無(wú)法推斷出我們?yōu)閿?shù)組指定的元素的類型（比如我們當(dāng)前想初始化一個(gè)存放number的類型），在此使用`as number[]`來(lái)告知typescript數(shù)組中存放元素的類型為number。 ### 重構(gòu) 我們`ngOnInit()`及`onPage()`方法中，使用不同的`page`調(diào)用了相同的后臺(tái)地址，這導(dǎo)致兩個(gè)方法中的代碼大體相同。由于重復(fù)代碼的存在，使得增加某些功能時(shí)要進(jìn)行多次處理。比如接收到后臺(tái)的分頁(yè)數(shù)據(jù)后，根據(jù)總頁(yè)碼數(shù)初始化分頁(yè)數(shù)組。 如果重構(gòu)為一個(gè)方法，則會(huì)使日后的修改、維護(hù)變得更簡(jiǎn)單，為此在組件中創(chuàng)建一個(gè)新的方法，并接修收`page`參數(shù)： ```typescript loadByPage(page = 0): void { } ``` 上述代碼中我們使用`page = 0`的方式為參數(shù)`page`設(shè)置了一個(gè)默認(rèn)值。接著將`onPage()`的方法體內(nèi)容遷移過(guò)來(lái)： ```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 => { // 在請(qǐng)求數(shù)據(jù)之后設(shè)置當(dāng)前頁(yè) this.page = page; this.pageData = pageData; console.log(pageData); // 根據(jù)返回的值生成分頁(yè)數(shù)組 this.pages = []; for (let i = 0; i < pageData.totalPages; i++) { this.pages.push(i); } }); } ``` 最后刪除原`ngOnInt()`、`onPage()`方法中原有的代碼，添加對(duì)`loadByName()`方法的調(diào)用： ```typescript ngOnInit(): void { // 使用默認(rèn)值 page = 0 調(diào)用loadByPage()方法 this.loadByPage(); } onPage(page: number): void { this.loadByPage(page); } ``` 如此以來(lái)`loadByPage()`則是我們?cè)斓奈ㄒ坏妮喿樱@使日后修改、維護(hù)起來(lái)都會(huì)更加簡(jiǎn)單。 ### disable 最后完成上一頁(yè)、下一頁(yè)的disabled。利用后臺(tái)返回的`pageData`，這個(gè)功能變得很簡(jiǎn)單：如果是第一頁(yè)，則disabled上一頁(yè)；如果是最后一頁(yè)，則disabled下一頁(yè): ```html <ul class="pagination col-md-auto"> - <li [ngClass]="{disabled: page === 0}" class="page-item"><span class="page-link">上一頁(yè)</span></li> + <li [ngClass]="{disabled: pageData.first}" class="page-item"><span class="page-link">上一頁(yè)</span></li> <li *ngFor="let p of pages" [ngClass]="{active: page === p}" class="page-item"> <span class="page-link" (click)="onPage(p)">{{p + 1}}</span> </li> - <li [ngClass]="{disabled: page === 2}" class="page-item"><span class="page-link">下一頁(yè)</span></li> + <li [ngClass]="{disabled: pageData.last}" class="page-item"><span class="page-link">下一頁(yè)</span></li> </ul> </nav> ``` 好了，愉悅的欣賞自己的杰作吧。 ## 本節(jié)作業(yè) 1. 恢復(fù)代碼至上節(jié)的內(nèi)容，完成動(dòng)態(tài)分頁(yè)功能 2. 當(dāng)前ClazzMockApi在返回總頁(yè)數(shù)時(shí)，返回的是10。將其修改為8，15，100試試 3. 請(qǐng)思索當(dāng)前分頁(yè)功能還存哪些不完善的地方，憑自己的能力嘗試完善它 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.5.zip) |