如何使用 Angular 2 中的复选框删除多行

Question

我们想在 Angular 中使用复选框删除多行 2.如何将检查行的多个 id 传递给组件数组。如何搜索特定 id 在此数组中...如何删除未选中的行的id.....实现这些功能的HOw是单个功能。请帮助我

<div class="card-content table-responsive" *ngIf="this.pagedItems!=null && this.pagedItems.length > 0">
<table class="table">
    <thead>
        <tr>
            <th class="text-danger" style="font-weight: bold">Sl NO</th>
          <!--  <th class="text-danger" style="font-weight: bold">Date</th>-->
            <th class="text-danger" style="font-weight: bold">Income/Expense</th>
            <th class="text-danger" style="font-weight: bold">Payment Mode</th>
            <th class="text-danger" style="font-weight: bold">Debtor</th>
            <th class="text-danger" style="font-weight: bold">Remarks</th>
            <th class="text-danger" style="font-weight: bold">Amount</th>
            <th class="text-danger" style="font-weight: bold"></th>
        </tr>
    </thead>
    <tbody>
        <tr  *ngFor="let item of this.pagedItems | paginate: { itemsPerPage: 500, currentPage: p }; let i = index"  >
                <td>{{i+1}}</td>
            <!--    <td>{{item.date_of_entry}}</td>-->
                <td>{{item.income_expense}}</td>
                <td>{{item.payment_mode}}</td>
                <td>{{item.creditor_fname}}</td>
                <td>{{item.remarks}}</td>
                <td>{{item.amount}}</td>
                <td>{{item.entry_id}}</td>
                <td><input type="checkbox" data-md-icheck  #checkdelet id="{{item.entry_id}}" name="deletecheck" value="{{item.entry_id}}" (click)="selectID(item.entry_id,$event)"></td>
        </tr>
    <button (click)="deleteSelected()">Delete</button>
    </tbody>
</table>
<br>
<pagination-controls (pageChange)="p = $event"></pagination-controls>

Answer 1

您可以声明一个数组来存储所选复选框的 ID。

SelectedIDs:any[];

在检查任何行时，您可以将id存储在上面的数组中。

selectID(id, event:any){
    this.SelectedIDs.push(id);
}

单击删除按钮时，您可以从数组中弹出具有匹配ID的元素。

deleteSelected(){
    this.SelectedIDs.forEach(function (obj) {
    this.pagedItems= this.pagedItems.filter(item=> item.id!== obj.id);
}

最后，您将拥有没有删除对象的this.pagedItems。

希望这有帮助。