在复选框选择角度和 web api 后删除多条记录中的问题 [英] Issue in Delete multiple records after checbox selection angular and web api
问题描述
现在此代码正在删除单个选定的记录，但无法删除多个记录.是否可以删除多个选定的记录?
组件 HTML
<!-- <app-spinner></app-spinner>--><div class="main"><app-titlebar [componentName]=componentName"></app-titlebar><div class="recordsWithSearchFilters"><div *ngIf='isRecordsFound == false' class="recordsCounter leftControl">未找到记录！</div><div *ngIf='isRecordsFound == true' class="recordsCounter leftControl">显示 1 到 {{employees.length}}(出{{employees.length}})<app-employees-filters *ngIf='isRecordsFound == true ||isFiltersApplied == true'(moveFilteredRecordsToList)=moveFilteredRecordsToList($event)";(detectClearFillterInRecordsList)=detectClearFillterInRecordsList($event)"></app-employees-filters>
<div *ngIf='isRecordsFound == true'><table class="table table-striped"><头>
</th><th style="width:32px">Photo</th><th style="min-width:150px;">全名</th><th style="width:80px;">Gender </th><th style="min-width:250px">指定</th><th style="width:150px;">部门</th><th style="min-width:100px;">创建日期</th><th style="width:100px;">Status</th><th style="min-width:90px;"></th></tr></thead><tbody id="results"><tr *ngFor="让雇员的雇员；让我=指数;让奇数 = 奇数"[ngClass]=奇数?'odd_col' : 'even_col'"><!-- <td>{{employee.id}}</td>--><td><div class="custom-control custom-checkbox"><输入类型=复选框"类=自定义控制输入"[id]="'customCheck'+i";值={{employee.id}}"；[(ngModel)]=employees[i].checked"；(ngModelChange)=已更改()"><label class="custom-control-label";[for]="'customCheck'+i"></label>
</td><td><div *ngIf='employee.thumbnail != ""'class =img-thumbnail rowThumbnail"><img src='http://localhost/CorePathLaboratories/uploads/employee/{{employee.thumbnail}}'[alt]=employee.fullName">
<div *ngIf='employee.thumbnail == ""'class =img-thumbnail rowThumbnail"><div class="shortName"样式=背景颜色:rgb(117, 117, 117);">{{employee.shortName |大写}}
</td><td>{{employee.fullName}}</td><td>{{employee.gender == '0' ?女":"男"}}</td><td>{{employee.designation}}</td><td>{{employee.department}}</td><td>{{employee.dateCreated}}</td><td><span class="label roundLabels";[class]="employee.status == '0' ?'label-danger' : 'label-success'>{{ 员工状态 == '0' ?不活动":主动"}}</span></td>
<!-- <button type="button";(click)=deleteProducts()">Delete Selected Product(s)</button>--><!-- <a class="btn btn-danger"><span class="selectedRecords"style="margin-right:5px;">0</span>Delete Selected</a>-->
<!-- 详细信息弹出窗口--><div class="modal";id=detailModal"角色=对话"><div class="modal-dialog modal-dialog-center modal-md";角色=文档"><div class="modal-content"><div class="modal-header"><h5 class="modal-title";id="exampleModalLongTitle">详细信息</h5><按钮类型=按钮"类=关闭"数据关闭=模态"aria-label=关闭"><span aria-hidden="true">×</span>
<div class="modal-body"><div style="margin:0 auto"><div *ngIf="employeesDetail == 0;else elseBlockShow"class='text-center'><imgsrc=../../../../assets/images/loading.svg">
<ng-template style="text-align:center";类=modalBody"#elseBlockShow><div *ngIf='employeesDetail.photo'><div class="detailPageHeader";style="padding-bottom:0;">
<div class="fullWidth text-left"><div style=display:none;>记录 ID:+{{employeesDetail.id}}</div><h6 class="text-center">{{employeesDetail.fullName}}({{employeesDetail.department}}/{{employeesDetail.designation}})</h6><ul class="labelsAndValues list-unstyled top-bottom-border";style="margin-bottom:0;"><li><label class="labels">创建时间:</label><spanclass="values">{{employeesDetail.dateCreated}}</span></li><li><label class="labels">Gender:</label><span class="values">{{employeesDetail.gender}}</span></li><li><label class="labels">Status: </label><span class="values">{{employeesDetail.status}}</span></li><div class="fullWidth"><div class="description";*ngIf='employeesDetail.detail'>{{employeesDetail.detail}}
</ng-模板>
<div class="modal-footer"><按钮类型=按钮"class =btn btn-secondary"data-dismiss=modal">Close</button>
<!-- 编辑弹出窗口--><div class="modal"id="editModal"角色=对话"><div class="modal-dialog modal-dialog-center modal-md";角色=文档"><div class="modal-content"><div class="modal-header"><h5 class="modal-title";id="exampleModalLongTitle">编辑</h5><按钮类型=按钮"类=关闭"数据关闭=模态"aria-label=关闭"><span aria-hidden="true">×</span>
<form (ngSubmit)="onSubmit()";[formGroup]="updateEmpForm";*ngIf=updateEmpForm"><div class="modal-body"><div *ngIf='successMsg' class="alert alert-success">{{successMsg}}</div><div *ngIf='errorMsg' class="alert alert-danger">{{errorMsg}}</div><div *ngIf='updateEmpForm.status == "INVALID"'class="alert alert-danger removeThis">所有字段都是必需的！</div><div style="margin:0 auto"><div *ngIf="employeesDetail == 0";class='text-center'>
<div *ngIf="employeesDetail";style="text-align:center"><div class="row">
<div class="modal-footer"><a class="btn btn-secondary";数据关闭=模态"(click)=resetAll()">关闭</a><按钮类型=提交"类=btn btn-primary"；[禁用]=!updateEmpForm.valid">更新</button>
</表单><!-- <pre>{{updateEmpForm.value |json}}</pre>--><!-- <pre>{{updateEmpForm.status}}</pre>-->
<!-- 删除弹出窗口--><div class="modal";id=deleteModal"角色=对话"><div class="modal-dialog modal-dialog-center modal-md";角色=文档"><div class="modal-content"><div class="modal-body";style="padding-bottom:15px"><div style="margin:0 auto"><div *ngIf='successMsg != ""'class='文本中心'><img style="height:24px;宽度:24px；右边距:7px"src=../../../../assets/images/loading.svg">请稍等
组件打字稿checkAllCheckBox(ev:any) {this.employees.forEach(x => x.checked = ev.target.checked)}isAllCheckBoxChecked() {return this.employees.every(employee =>employee.checked);}删除产品():无效{const selectedProducts = this.employees.filter(employee =>employee.checked).map(employee =>employee.id);//console.log (selectedProducts);if(selectedProducts && selectedProducts.length > 0) {this.employeeservice.deleteProducts(selectedProducts).subscribe(res => {this.clss = 'grn';this.msg = '产品删除成功';}, 错误 =>{this.clss = 'rd';this.msg = '删除产品时出错';});} 别的 {this.clss = 'rd';this.msg = '您必须至少选择一种产品';}}服务打字稿deleteProducts(ids: number[]) {if (confirm("Are you sure to delete?")) {常量数据 = ids;返回 this.http.get
要一次性删除多个 ID，您必须公开一个接受多个 ID 的 API(可能作为 POST 主体)
然后而不是调用
返回 this.http.get(this.serverUrl + 'delete/' + data) 你可以打电话
return this.http.get(this.serverUrl + 'deleteBatch/', {ids: ids}) 在后端，您可能希望从 POST 正文中读取 ID 并根据该 ID 进行删除
$data = json_decode(file_get_contents('php://input'), true);$ids = $data->ids//删除每一项Right now this code is deleting single selected record, but unable to delete multiple records. Is there away to delete multiple selected records?
Component Html
<!-- <app-spinner></app-spinner> -->
<div class="main">
<app-titlebar [componentName]="componentName"></app-titlebar>
<div class="recordsWithSearchFilters">
<div *ngIf='isRecordsFound == false' class="recordsCounter leftControl">No records found!</div>
<div *ngIf='isRecordsFound == true' class="recordsCounter leftControl">Showing 1 to {{employees.length}}
(out of {{employees.length}})
</div>
<app-employees-filters *ngIf='isRecordsFound == true || isFiltersApplied == true'
(moveFilteredRecordsToList)="moveFilteredRecordsToList($event)"
(detectClearFilllterInRecordsList)="detectClearFilllterInRecordsList($event)">
</app-employees-filters>
</div>
<div *ngIf='isRecordsFound == true'>
<table class="table table-striped">
<thead>
<tr class="trWithSorting">
<th style="width:30px;min-width:30px;" class="masterCheck">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
id="masterCustomCheck" name="masterChk" [checked]="isAllCheckBoxChecked()" (change)="checkAllCheckBox($event)">
<label class="custom-control-label" for="masterCustomCheck"></label>
</div>
</th>
<th style="width:32px">Photo</th>
<th style="min-width:150px;">Full Name</th>
<th style="width:80px;">Gender </th>
<th style="min-width:250px">Designation </th>
<th style="width:150px;">Department </th>
<th style="min-width:100px;">Created Date</th>
<th style="width:100px;">Status</th>
<th style="min-width:90px;"></th>
</tr>
</thead>
<tbody id="results">
<tr *ngFor="let employee of employees; let i=index; let odd = odd" [ngClass]="odd ? 'odd_col' : 'even_col'">
<!-- <td>{{employee.id}}</td> -->
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
[id]="'customCheck'+i" value="{{employee.id}}" [(ngModel)]="employees[i].checked" (ngModelChange)="changed()">
<label class="custom-control-label" [for]="'customCheck'+i"></label>
</div>
</td>
<td>
<div *ngIf='employee.thumbnail != ""' class="img-thumbnail rowThumbnail">
<img src='http://localhost/CorePathLaboratories/uploads/employee/{{employee.thumbnail}}'
[alt]="employee.fullName">
</div>
<div *ngIf='employee.thumbnail == ""' class="img-thumbnail rowThumbnail">
<div class="shortName" style="background-color: rgb(117, 117, 117);">
{{employee.shortName | uppercase}}
</div>
</div>
</td>
<td>{{employee.fullName}}</td>
<td>{{employee.gender == '0' ? "Female" : "Male"}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.department}}</td>
<td>{{employee.dateCreated}}</td>
<td>
<span class="label roundLabels" [class]="employee.status == '0' ? 'label-danger' : 'label-success'">
{{ employee.status == '0' ? "Inactive" : "Active" }}
</span>
</td>
<td class="actionControls">
<a data-toggle="modal" data-target="#detailModal" class="icon icon-Detail-15 viewControl" [id]='employee.id'
(click)="detailRecord($event)"></a>
<a data-toggle="modal" data-target="#editModal" class="icon icon-Edit-14 editControl" [id]='employee.id'
(click)="updateRecord($event)"></a>
<a class="icon icon-Delete-27 deleteControl" [id]='employee.id' (click)="deleteRecord($event)"></a>
</td>
</tr>
</tbody>
</table>
{{error}}
<button type="button" class="btn btn-default" (click)="deleteProducts()">({{count}}) Delete Selected</button>
<div style="display:none;">
<form (ngSubmit)="deleteSelectedRecords()" [formGroup]="selectedRowsForm" *ngIf="selectedRowsForm">
<input type="text" [value]="selectedRows"
formControlName="selectedItems" [(ngModel)]="selectedRows" class="allselectedRecords">
<button data-toggle="modal" data-target="#deleteModal"
class="btn btn-primary sendSelectedRowsBtn" type="submit">Submit</button>
</form>
<!-- <pre>{{selectedRowsForm.value | json}}</pre>
<pre>{{selectedRowsForm.status}}</pre> -->
</div>
<!-- <button type="button" (click)="deleteProducts()">Delete Selected Product(s)</button> -->
<!-- <a class="btn btn-danger"><span class="selectedRecords" style="margin-right:5px;">0</span>Delete Selected</a> -->
</div>
<!-- Detail Popup -->
<div class="modal" id="detailModal" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="margin:0 auto">
<div *ngIf="employeesDetail == 0; else elseBlockShow" class='text-center'><img
src="../../../../assets/images/loading.svg">
</div>
<ng-template style="text-align:center" class="modalBody" #elseBlockShow>
<div *ngIf='employeesDetail.photo'>
<div class="detailPageHeader" style="padding-bottom:0;">
<div class="employeePhotoPlacement">
<div class="employeePhotoPlacementInner">
<img src="http://localhost/CorePathLaboratories/uploads/employee/{{employeesDetail.photo}}"
class="imgOnly" style="max-width:92px; max-height:92px" />
</div>
</div>
</div>
</div>
<div class="fullWidth text-left">
<div style=display:none;>Record Id: +{{employeesDetail.id}}</div>
<h6 class="text-center">{{employeesDetail.fullName}}
({{employeesDetail.department}}/{{employeesDetail.designation}})</h6>
<ul class="labelsAndValues list-unstyled top-bottom-border" style="margin-bottom:0;">
<li><label class="labels">Created On: </label><span
class="values">{{employeesDetail.dateCreated}}</span></li>
<li><label class="labels">Gender: </label><span class="values">{{employeesDetail.gender}}</span></li>
<li><label class="labels">Status: </label><span class="values">{{employeesDetail.status}}</span></li>
</ul>
<div class="fullWidth">
<div class="description" *ngIf='employeesDetail.detail'>
{{employeesDetail.detail}}
</div>
</div>
</div>
</ng-template>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Edit Popup -->
<div class="modal" id="editModal" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form (ngSubmit)="onSubmit()" [formGroup]="updateEmpForm" *ngIf="updateEmpForm">
<div class="modal-body">
<div *ngIf='successMsg' class="alert alert-success">{{successMsg}}</div>
<div *ngIf='errorMsg' class="alert alert-danger">{{errorMsg}}</div>
<div *ngIf='updateEmpForm.status == "INVALID"' class="alert alert-danger removeThis">All fields are required!</div>
<div style="margin:0 auto">
<div *ngIf="employeesDetail == 0" class='text-center'><img src="../../../../assets/images/loading.svg">
</div>
<div *ngIf="employeesDetail" style="text-align:center">
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<input type="hidden" formControlName="id" [(ngModel)]="employeesDetail.id" [value]="employeesDetail.id">
<label>Full Name</label>
<input type="text" class="form-control" [(ngModel)]="employeesDetail.fullName"
formControlName="fullName" [value]="employeesDetail.fullName" (blur)="onblur($event)">
<div *ngIf="updateEmpForm.controls['fullName'].invalid" class="validationErrors">
<!-- No nned to use dirty and touched checks, bacause fields already have values -->
Full Name is required.
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label>Gender</label>
<select class="form-control" [(ngModel)]="employeesDetail.gender" formControlName="gender"
[value]="employeesDetail.gender">
<option value="">Select One</option>
<option value="1" [selected]="employeesDetail.gender == 1 ? 'selected' : ''">Male</option>
<option value="0" [selected]="employeesDetail.gender == 0 ? 'selected' : ''">Female</option>
</select>
<div *ngIf="updateEmpForm.controls['gender'].invalid" class="validationErrors">
<!-- No nned to use dirty and touched checks, bacause fields already have values -->
Gender is required.
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label>Department</label>
<input type="text" class="form-control" [(ngModel)]="employeesDetail.department"
formControlName="department" [value]="employeesDetail.department">
<div *ngIf="updateEmpForm.controls['department'].invalid" class="validationErrors">
<!-- No nned to use dirty and touched checks, bacause fields already have values -->
Department is required.
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control" [(ngModel)]="employeesDetail.designation"
formControlName="designation" [value]="employeesDetail.designation">
<div *ngIf="updateEmpForm.controls['designation'].invalid" class="validationErrors">
<!-- No nned to use dirty and touched checks, bacause fields already have values -->
Designation is required.
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label>Photo</label>
<div class="form-control formControlOverInPutTypeFile">
<input type="file" class="inputTYpeFile float-left"
(change)="changeListener($event)" accept=".png, .jpg, .jpeg, .pdf">
<div *ngIf='employeesDetail.photo' class="imgViewerInFormControlArea">
<div class="imgViewerInFormControl">
<img
src="http://localhost/CorePathLaboratories/uploads/employee/{{employeesDetail.thumbnail}}"
class="imgOnly" />
</div>
</div>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<label>Status</label>
<select class="form-control" [(ngModel)]="employeesDetail.status" formControlName="status"
[value]="employeesDetail.status">
<option value="">Select One</option>
<option value="1" [selected]="employeesDetail.status == 1 ? 'selected' : ''">Active</option>
<option value="0" [selected]="employeesDetail.status == 0 ? 'selected' : ''">Inactive</option>
</select>
<div *ngIf="updateEmpForm.controls['status'].invalid" class="validationErrors">
<!-- No nned to use dirty and touched checks, bacause fields already have values -->
Status is required.
</div>
</div>
</div>
<div class='col-md-12'>
<div class="form-group">
<label>Detail</label>
<editor [(ngModel)]="employeesDetail.detail" formControlName="detail" [init]="{
height: 280,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
'advlist autolink link image lists charmap print preview'
],
toolbar:
'table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code',
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage',
branding: false,
language: 'en'
}">
</editor>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-secondary" data-dismiss="modal" (click)="resetAll()">Close</a>
<button type="submit" class="btn btn-primary" [disabled]="!updateEmpForm.valid">Update</button>
</div>
</form>
<!-- <pre>{{updateEmpForm.value | json}}</pre> -->
<!-- <pre>{{updateEmpForm.status}}</pre> -->
</div>
</div>
</div>
<!-- Delete Popup -->
<div class="modal" id="deleteModal" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-body" style="padding-bottom:15px">
<div style="margin:0 auto">
<div *ngIf='successMsg != ""' class='text-center'>
<img style="height:24px; width:24px; margin-right:7px" src="../../../../assets/images/loading.svg">
Please Wait
</div>
</div>
</div>
</div>
</div>
</div>
Component Typescript
checkAllCheckBox(ev:any) {
this.employees.forEach(x => x.checked = ev.target.checked)
}
isAllCheckBoxChecked() {
return this.employees.every(employee => employee.checked);
}
deleteProducts(): void {
const selectedProducts = this.employees.filter(employee => employee.checked).map(employee => employee.id);
//console.log (selectedProducts);
if(selectedProducts && selectedProducts.length > 0) {
this.employeeservice.deleteProducts(selectedProducts)
.subscribe(res => {
this.clss = 'grn';
this.msg = 'Products successfully deleted';
}, err => {
this.clss = 'rd';
this.msg = 'Something went wrong during deleting products';
}
);
} else {
this.clss = 'rd';
this.msg = 'You must select at least one product';
}
}
Service typescript
deleteProducts(ids: number[]) {
if (confirm("Are you sure to delete?")) {
const data = ids;
return this.http.get<any>(this.serverUrl + 'delete/' + data)
.pipe( // used to combine functions in one function
catchError(this.handleError)
);
}
return of({});
}
Web APi Controller
```php
public function delete($id)
{
$response = array();
$this->load->model('employee_mod');
$reponseFromModel = $this->employee_mod->deleteFun($id);
$this->session->set_flashdata("deleted", "Record deleted successfully!");
if($reponseFromModel == true){
$response = array(
'status' => 'success',
'message' => $_SESSION['deleted'],
);
$this->output
->set_status_header(200)
->set_content_type('application/json')
->set_output(json_encode($response));
}
}
To delete multiple IDs in one go, you would have to expose an API that takes multiple IDs (probably as a POST body)
then instead of calling
return this.http.get<any>(this.serverUrl + 'delete/' + data)
you can call
return this.http.get<any>(this.serverUrl + 'deleteBatch/', {ids: ids})
and in the backend, you would want to read the ids from the POST body and delete based on that
$data = json_decode(file_get_contents('php://input'), true);
$ids = $data->ids
// delete each item
这篇关于在复选框选择角度和 web api 后删除多条记录中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
