我正在从事基于角度的项目。我正在使用数据表来显示数据。当我尝试从表中删除一些数据时,无法显示新数据。
以下是我的.html页面:
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger">
<thead>
<tr>
<th>Book Name</th>
<th>Book Genres</th>
<th>Book Details</th>
<th style="width: 100px;">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of books">
<td *ngIf="show >{{book.book_name}}</td>
<td *ngIf="show>{{book.book_genres}}</td>
<td *ngIf="show>{{book.book_details}}</td>
<td>
<button type="button" class="btn btn-default" (click)="deleteBook(book.book_id)" data-toggle="tooltip"
title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
</td>
<td colspan="3" *ngIf="!show">
<div class="alert alert-secondary text-center">
<strong>{{showmessage}}</strong>
</div>
</td>
</tr>
</tbody>
</table>
</thead>
以下是我的.ts文件,其中包含http调用:
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
retrieve: true,
processing: true
};
this.httpbookservice.getBooks()
.subscribe(
res => {
if (res.val.length) {
this.books = res.val;
} else {
this.show = false;
}
}, err => {
console.log("err:", err)
}
)
ngAfterViewInit(): void {
console.log("After View Init")
this.dtTrigger.next();
}
deleteBook(id) {
this.deleteID = id;
this.httpbookservice.deleteBooks(this.deleteID)
.subscribe(
res => {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
this.notifier.notify('success', 'Book Deleted!')
}, err => {
console.log("err:", err)
}
)
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
httpbookservice是进行http调用的服务文件。 以下是使用的参考:
预先感谢