Angular9多个复选框删除

时间:2020-07-30 09:03:16

标签: asp.net angular

我将表格与选择一起使用在角度材质上以进行多次删除我是新手 现在我的项目使用.net C#Angular和Basic CRUD 我想返回对象或数组供我的控制器使用,但在我的代码上返回“ 0”

我的密码

HTML

  <button (click)="DeleteData()" value="Delete">DELETE</button>

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource">

   <ng-container matColumnDef="select">
    <th style="width: 100px;" mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()"></mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)"></mat-checkbox>
    </td>
  </ng-container>

      <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">{{element.Name}} </td>
      </ng-container>
   

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"(click)="selection.toggle(row)"></tr>
    </table>

  </div>

组件

  refreshList() {

    this.service.getdetail()
      .subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
      })
  }


  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = !!this.dataSource && this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(r => this.selection.select(r));
  }

  checkboxLabel(row: detail): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.Id + 1}`;
  }

    DeleteData() {
    const numSelected = this.selection.selected;

        this.service.deleteData(numSelected).subscribe(result => {          
          alert(result);
          this.refreshList();

        })
  }

服务

deleteData(num: detail[]): Observable< string >  {
  return this.http.post< string>(this.rootURL + '/WebAPI/DeleteRecord', num);
}

export class detail {
  Id: number;
  Name: string;
}

This My Result Picture

0 个答案:

没有答案
相关问题