Получение Невозможно прочитать свойство затем неопределенного в datatable - PullRequest
0 голосов
/ 24 октября 2019

Я пишу код, в котором пользователь ищет письмо, а затем все проблемы, связанные с этим письмом, динамически заносятся в таблицу.

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

Мой HTML-код

<div name="searchComponent" *ngIf="isEmpty==false && searchBool==false" class="table-responsive table table-striped" id="table1">
            <table class="table" id="searchTable" datatable [dtOptions]="dtOptions"
            [dtTrigger]="dtTrigger" matSort (matSortChange)="sortData($event)">
                <thead>
                    <tr>
                        <th id="title" mat-sort-header="title">Title</th>
                        <th id="reporter" mat-sort-header="reporter">Reporter</th>
                        <th id="assigned" mat-sort-header="assignto">Assigned To</th>
                        <th id="description" mat-sort-header="description">Description</th>
                        <th id="status" mat-sort-header="status">Status</th>
                        <th id="action" colspan="2">Action</th>
                    </tr>
                </thead>
                <tbody id="table-body">
                    <tr class="row1" (click)="view(i)" *ngFor="let object of sortedIssues | paginate:{ itemsPerPage: 5, currentPage: p };let i of index">
                        <td>{{object.title}}</td>
                        <td>{{object.reporter}}</td>
                        <td>{{object.assignto}}</td>
                        <td>{{object.description}}</td>
                        <td>{{object.status}}</td>
                        <td><button id="edit" class="btn btn-primary" (click)="$event.stopPropagation();edit(i)">Edit</button></td>
                        <td><button id="delete" class="btn btn-primary" (click)="$event.stopPropagation();delete(i)">Delete</button></td>
                    </tr>
                </tbody>
            </table>
            <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>

И требуемый машинописный код

import{DataTableDirective} from 'angular-datatables'
 @ViewChild(DataTableDirective,{static:false})
    datatableElement: DataTableDirective;
    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject<any> = new Subject();

 onKey(event: any) { // without type info
      let data={
        identifier:this.searchForm.get('search').value
      }
      this.appService.search(data).subscribe(
        data=>{
          this.issuesCollection=data.data
          setTimeout(()=>{
            this.renderer()
          },2000)
          // $('#searchTable').DataTable().destroy
          // this.dtTrigger.next()
        }
      )
    }  

    renderer=()=>{
      console.log(this.datatableElement)
      this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
        //dtInstance.draw(true);
        dtInstance.destroy()
        this.dtTrigger.next()
     });
        }

Я получаю эту ошибку

I am getting this error

Может кто-нибудь, пожалуйста, помогите мне, потому что я застрял и не могу найти решениеонлайн Thnxx заранее

1 Ответ

0 голосов
/ 24 октября 2019

Глядя на ваш фрагмент кода, ошибка ссылается на эту строку: this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {.

Попробуйте добавить следующее:

ngAfterViewInit() {
   this.dtTrigger.next();
}

То, что происходит, инициализирует триггер, без которогоdtInstance не создан.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...