Question

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

<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没有删除的对象。

希望这有帮助。

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

1 个答案: