Question

这是html页面中的代码，需要组件和服务的代码请帮助解决这个问题** 使用angular 2中的复选框进行多次删除 **我只发布了html代码，但我不知道组件和服务的代码在这里代码使用单删除但我需要多次删除

    <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" name="deletecheck"></td>
           <td class="td-actions text-right">
                   <button type="button" rel="tooltip" title="Edit" class="btn btn-primary btn-simple btn-xs" (click) = "editSales({entryid:item.entry_id,InExp:item.income_expense,Amt:item.amount,Paymode:item.payment_mode,Debtr:item.creditor_id,Vehic:item.vechicle_no,Remarks:item.remarks})">
                        <i class="material-icons">edit</i>
                    </button>
                </td>   
            </tr>

        <button (click)="deleteSelected()">Delete</button>
        </tbody>
    </table>

    <br>
    <pagination-controls (pageChange)="p = $event"></pagination-controls>

</div>

Answer 1

在组件中添加一系列选定项目：

selectedItems: Item[];

添加另一个按钮以（de）选择项目：

                <button type="button" rel="tooltip" title="Select" class="btn btn-info btn-simple btn-xs" (click) = "selectSales({entryid:item.entry_id})">
                    <i class="material-icons">close</i>
                </button>

在组件中：

selectSales(item) {
    const indexFound = this.selectedItems.indexOf(selected => selected.id === item.id;
    if (indexFound > -1) {
        this.selectedItems.splice(indexFound, 1);
    } else {
        this.selectedItems.push(item);
    }
}

deleteSelected() {
    this.selectedItems.forEach(item => {
        // delete each item
    });
}

使用角度2中的复选框进行多次删除

1 个答案: