我选择行并无法获得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个数据时,此后我单击删除按钮)