本節我們嘗試一次刪除多個學生。 ## 原型 在原型的，則一定要先開發原型！是新手我們應該這樣，是老手更應該這樣。 若要一次刪除多個學生，則需要為每條記錄前加一個checkbox選擇框。 ```html +++ b/first-app/src/app/student/student.component.html @@ -7,6 +7,7 @@ <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> + <th>選擇</th> <th>序號</th> <th>姓名</th> <th>學號</th> @@ -18,6 +19,7 @@ </thead> <tbody> <tr *ngFor="let student of pageData.content; index as index"> + <td><input type="checkbox"></td> <td>{{index + 1}}</td> <td>{{student.name}}</td> <td>{{student.number}}</td> ```  接著再增加一個刪除全部的按鈕： ```html +++ b/first-app/src/app/student/student.component.html @@ -1,6 +1,7 @@ <div class="row"> <div class="col-12 text-right"> <a class="btn btn-primary mr-2" routerLink="./add"><i class="fas fa-plus"></i>新增</a> + <button class="btn btn-danger mr-2" type="button"><i class="fas fa-trash-alt"></i>刪除</button> </div> </div> ```  ## 功能 實現功能的方式有很多種，我們在此使用一個比較容易理解的。 - ①首先在C層中增加一個數組，用于存待刪除學生的**索引值**。注意，這里我們未使用`ID`，因為通過索引值能夠輕松的找到`ID`。 - ②某個`checkbox`并點擊時，將索引值傳給C層。C層根據索引在數組中查找，如果查到了，就將其由數組中刪除；如果沒有找到，就將其添加到數組中。 - ③點擊刪除按鈕時，如果待刪除的數組為空，則彈出提示框；如果數組不為空，則按索引值依次取出待刪除的ID，并將其傳入M層。 ### ①初始化數組 ```typescript +++ b/first-app/src/app/student/student.component.ts @@ -15,6 +15,8 @@ export class StudentComponent implements OnInit { page = 0; size = environment.size; + beDeletedIndexes = new Array<number>(); + constructor(private studentService: StudentService) { } ``` ### ②傳值 ```html +++ b/first-app/src/app/student/student.component.html @@ -20,7 +20,7 @@ </thead> <tbody> <tr *ngFor="let student of pageData.content; index as index"> - <td><input type="checkbox"></td> + <td><input type="checkbox" (click)="onCheckboxClick(index)"></td> <td>{{index + 1}}</td> <td>{{student.name}}</td> <td>{{student.number}}</td> ``` C層： ```typescript /** * checkbox被點擊 * @param index 索引值 */ onCheckboxClick(index: number): void { if (this.beDeletedIndexes.indexOf(index) === -1) { this.beDeletedIndexes.push(index); } else { this.beDeletedIndexes = this.beDeletedIndexes.filter(i => i !== index); } } ``` `filter()`是數組的一個內置方法，它的作用是將數組中的數據依次進行過濾，保留符合條件的，移除不符合條件的，比如：  上述方法的作用時將數據中的不等3的數據保留。 ### ③點擊刪除按鈕 ```html - <button class="btn btn-danger mr-2" type="button"><i class="fas fa-trash-alt"></i>刪除</button> + <button class="btn btn-danger mr-2" type="button" (click)="onBatchDeleteClick()"><i class="fas fa-trash-alt"></i>刪除</button> </div> ``` C層方法： ```typescript + /** + * 批量刪除按鈕被點擊 + */ + onBatchDeleteClick(): void { + if (this.beDeletedIndexes.length === 0) { + Report.warning('出錯啦', '請先選擇要刪除的學生', '返回'); + } + } } ``` - Report是notiflix提供的另一個方法，詳情請自行查閱官方文檔。  完成功能： ```typescript +++ b/first-app/src/app/student/student.component.ts onBatchDeleteClick(): void { if (this.beDeletedIndexes.length === 0) { Report.warning('出錯啦', '請先選擇要刪除的學生', '返回'); + } else { + Confirm.show('請確認', '該操作不可逆', '確認', '取消', + () => { + // 根據index獲取ids + const ids = [] as number[]; + this.beDeletedIndexes.forEach(index => { + ids.push(this.pageData.content[index].id); + }); + // 調用批量刪除 + this.studentService.batchDelete(ids) + .subscribe(() => { + this.beDeletedIndexes = []; + this.loadData(this.page); + }); + }); } } } ``` 最后，在M層初始化個方法，在方法中直接返回供開發用的可訂閱對象： ```typescript +++ b/first-app/src/app/service/student.service.ts @@ -47,4 +47,12 @@ export class StudentService { .append('size', size.toString()); return this.httpClient.get<Page<Student>>('/student/pageOfCurrentTeacher', {params: httpParams}); } + + /** + * 批量刪除 + * @param ids 學生ID數組 + */ + batchDelete(ids: number[]): Observable<void> { + return of(undefined); + } } ``` 此時，點擊刪除按鈕時將彈出確認對話框，點擊確認后將觸發M層的方法。并在刪除成功后重新向后臺發起請求，獲取最新的分頁數據。  ## M層 M層負責與API交互，批量刪除API如下： ```bash DELETE /student/batchDeleteIds ``` 接收的請求參數為：`ids`，類型為數組。 根據上述信息建立MockApi如下： ```typescript +++ b/first-app/src/app/mock-api/student.mock.api.ts @@ -70,6 +70,14 @@ export class StudentMockApi implements MockApiInterface { }, { method: 'DELETE', url: '/student/(\\d+)' + }, { + method: 'DELETE', + url: '/student/batchDeleteIds', + result: ((urlMatches: any, options: RequestOptions) => { + const httpParams = options.params as HttpParams; + const ids = httpParams.getAll('ids'); + Assert.isArray(ids, '未接收到ids'); + }) } ]; } ``` 單元測試： ```typescript + fit('batchDeleteIds', () => { + const ids = [1, 2, 3]; + let called = false; + service.batchDelete(ids) + .subscribe(() => { + called = true; + }); + expect(called).toBeFalse(); + getTestScheduler().flush(); + expect(called).toBeTrue(); + }); + ``` 完成方法： ```typescript +++ b/first-app/src/app/service/student.service.ts @@ -53,6 +53,7 @@ export class StudentService { * @param ids 學生ID數組 */ batchDelete(ids: number[]): Observable<void> { - return of(undefined); + const stringIds = ids.map(id => id.toString()); + return this.httpClient.delete<void>('/student/batchDeleteIds', {params: {ids: stringIds}}); } } ``` 繼`filter()`、`sort()`方法后，我們剛剛又使用了`map()`方法對數組中的各項進行了轉換。  單元測試通過，說明方法請求正確。 ## 本節作業 Array中除`filter`、`map`外，還存在常用的`sort`等方法，請參閱官方文檔進一步學習。 | 鏈接 | 名稱 | | ------------------------------------------------------------ | -------- | | [https://github.com/mengyunzhi/angular11-guild/archive/step7.5.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.5.2.zip) | 本節源碼 | | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) | map() | | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) | sort() | | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) | filter() | | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | Array |