在选择复选框选择 Angular 和 Web api 后删除多条记录时出现问题

Question

现在此代码正在删除单个选定的记录，但无法删除多个记录。有没有办法删除多个选定的记录？

组件 HTML

<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>

  </div>
</div>

组件打字稿

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';
            }
      }

服务打字稿

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 控制器

<?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));
                  }
                }
?>

Answer 1

要一次性删除多个 ID，您必须公开一个采用多个 ID 的 API（可能作为 POST 正文）

然后而不是打电话

return this.http.get<any>(this.serverUrl + 'delete/' + data)

可以打电话

return this.http.get<any>(this.serverUrl + 'deleteBatch/', {ids: ids})

在后端，您需要从 POST 正文中读取 id 并据此删除

$data = json_decode(file_get_contents('php://input'), true);
$ids = $data->ids
// delete each item

Answer 2

In Angular 13
I want to delete multiple ids in array then
i send array list to an api
like this
**listOfId:[34, 35, 39]**

So in service file i make this changes
beacuse of i receving httpErrorresponse like **body is missing**
then i make change in api like this.

 public deleteMultipleCategory(data: any): Observable<any> {

return this.http.delete(this.Baseurl + "Categories/deleteMultiple", { body: data 
});
}

i add body tag in api.