无法在Angular 6中的Angular-Datatables中重新呈现表

时间:2018-11-14 10:07:38

标签: angular6 angular-datatables

我正在从事基于角度的项目。我正在使用数据表来显示数据。当我尝试从表中删除一些数据时,无法显示新数据。

以下是我的.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调用的服务文件。 以下是使用的参考:

Ref

Ref1

预先感谢

0 个答案:

没有答案