Question

我有一个主复选框和每个行的一个复选框，如果我在主复选框上选中，则所有存在的项目都将被选中，但是我无法在控制台中删除整行。而且我点击的行也必须在控制台中获取。

HTML：

<a id="lnk_Condition" (click)="deleteConditionDetails()" style="padding-left: 15px">Delete
</a>
<p-table #dt [columns]="tableHeaders" [value]="ccdList" [lazy]="true" [paginator]="true" (onLazyLoad)="loadLazy($event)"
  [totalRecords]="totalcount" [rows]="10">
  <ng-template pTemplate="header" let-columns>
    <tr role="row">
      <th width="30">
        <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll()" #ccdListViewChild>
      </th>
      <th width="90">Date Added
      </th>
      <th width="300">Description
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td><input type="checkbox" [(ngModel)]="rowData.selected" (change)="checkIfAllSelected();"></td>
      <td>{{rowData.DateAdded}}</td>
      <td>{{rowData.Description}}</td>
    </tr>
  </ng-template>
</p-table>

TS：

selectAll() {
  for (var i = 0; i < this.ccdList.length; i++) {
    this.ccdList[i].selected = this.selectedAll;
  }
}

checkIfAllSelected() {
  this.selectedAll = this.ccdList.every(function (item: any) {
    return item.selected == true;
  })
}

deleteConditionDetails() {

}

Answer 1

首先将Delete更改为button只是为了简化操作：

<button (click)="deleteConditionDetails()"> Delete </button>

然后在函数中实现：

   deleteConditionDetails() {
    let i=0;
    for(i=0;i<this.ccdList.length;i++) {
      if(this.ccdList[i].selected)
          console.log(this.ccdList[i]);
    }
 }

如何使用angular2选择特定行进行删除操作

1 个答案: