Невозможно отобразить таблицу в Angular-Datatables в Angular 6 - PullRequest
Новая
       25

Невозможно отобразить таблицу в Angular-Datatables в Angular 6

0 голосов
/ 14 ноября 2018

Я работаю над угловым проектом. Я использую таблицы данных для отображения данных. Когда я пытаюсь удалить некоторые данные из таблицы, я не могу показать новые данные.

Следующая моя страница .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

Заранее спасибо

...