Angular2-datatable删除行ID

时间:2018-11-27 07:24:20

标签: angular

我选择行并无法获得ID时遇到问题,这对必须删除ID数据的API删除产生了影响。我在此链接https://github.com/jdcalkins/ng2-data-table

中遵循了该教程。

这是我的app.component.ts(仅用于选择和删除数据的方法)

public booking_meeting_room: BookingMeetingRoomModel;
public selectedEntities: any[];

// function to handle data/entities selected/deselected in the table 
public setSelectedEntities($event: any) {
    this.selectedEntities = $event;
    console.log(this.selectedEntities);
}

public onCancel(): void {

    if (!this.btnControl) { return; }
    this.btnControl = false;
    this.booking_meeting_roomService.cancel(this.booking_meeting_room.id)
        .subscribe(
        s => {
            this.btnControl = true;
            this.alertService.success('Booking Meeting Room has been cancel');
        },
        e => {
            this.btnControl = true;
            this.alertService.error(e.status, e.statusText, e._body);
        });
}

这是我的app.component.html(仅表格html代码)

<div class="col-md-12">
    <table class="table table-striped" [mfData]="booking_meeting_rooms | dataNameFilter : filterQuery"  [mfRowsOnPage]="rowsOnPage" [mfSaveRowsOnPage]="true" #mf="mfDataTable"
             (mfSelectedEntities)="setSelectedEntities($event)">
        <thead>
            <tr>
                <!-- <th>
                    <mfRowSelectorHead></mfRowSelectorHead>
                </th> -->
                <th style="width: 15%">
                    <mfDefaultSorter by="bookingDate">{{ 'Date' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="bookingTime">{{ 'Time' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="event">{{ 'Event/Meeting' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="agenda">{{ 'Agenda' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="meetingRoom.name">{{ 'Meeting Room' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="meetingRoom.location">{{ 'Location' | translate }}</mfDefaultSorter>
                </th>
                <th *ngIf="employee.isAdmin == true" style="width: 15%">
                    <mfDefaultSorter by="employee.name">{{ 'Employee' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    <mfDefaultSorter by="status">{{ 'Status' | translate }}</mfDefaultSorter>
                </th>
                <th style="width: 15%">
                    {{ 'Action' | translate }}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let booking_meeting_room of mf.data; let ndx = index">
                <td><mfRowSelector [entity]="booking_meeting_room" [checkboxId]="ndx"></mfRowSelector></td>
                <td>{{ booking_meeting_room.bookingDate | date: format_date }}</td>
                <td>{{ booking_meeting_room.bookingTime | date: format_time }}</td>
                <td>{{ booking_meeting_room.bookingType | bookingTypeStatus}}</td>
                <td>{{ booking_meeting_room.agenda }}</td>
                <td>{{ booking_meeting_room.meetingRoom.name }}</td>
                <td>{{ booking_meeting_room.meetingRoom.location.name }}</td>
                <td *ngIf="employee.isAdmin == true">{{ booking_meeting_room.employee.name }} [ {{
                    booking_meeting_room.employee.department }} ]</td>
                <td>{{ booking_meeting_room.bookingStatus | bookingStatus}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6" *ngIf="employee.isAdmin == true else not_admin">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                </td>
                <ng-template #not_admin>
                    <td colspan="8">
                        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                    </td>
                </ng-template>
            </tr>
        </tfoot>
    </table>
    <button class="btn btn-sm btn-danger" (click)="goRemove()">Delete</button>
</div>

这是我的错误输出(当我已经在行表中选择2个数据时,此后我单击删除按钮)

enter image description here

这是我选择行表时的输出数据 enter image description here

输出用户界面 enter image description here

0 个答案:

没有答案