获取无法读取数据表中未定义的属性

Question

我正在编写一个代码，用户在其中搜索一个字母，然后将与该字母相关的所有问题动态填充到表中。

基本上，我想要实现的功能是用获得的结果重新填充表格。我在网上查看了如何做到这一点，并找到了 angular-datatables 模块。

我的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()
     });
        }

我收到了这个错误

有人可以帮我吗，因为我被卡住了，无法在线找到任何解决方案 提前谢谢

Answer 1

通过查看您的代码 sn-p，错误引用了这一行：this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {。

尝试添加以下内容：

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

这样做是初始化触发器，没有它就不会创建dtInstance。