在Angular 2中渲染数据表-dtInstance.then错误 [英] Rerendering Datatable in Angular 2 - dtInstance.then error

问题描述

我的angular 2应用程序中有一个组件，该组件具有一个下拉列表和一个数据表.基于从下拉列表中选择的名称，我想在数据表中显示详细信息.

I have a component in my angular 2 application which has a dropdown list and a datatable. Based on the name selected from the dropdown list, I want to display the details in the datatable.

HTML-

<div>
  <select [(ngModel)]="selectedName">
    <option *ngFor="let name of nameList" value= {{name.firstName}} >
      {{name.firstName}}
    </option>
  </select>

  <button id="submitName" (click)="getData()">Go</button>
</div>

<table #myTable [dtTrigger]="dtTrigger" datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last Name</th>
      <th>Middle Name</th>
    </tr>
  </thead>
  <tbody *ngIf="retrievedNames">


      <tr *ngFor="let name of retrievedNames">
        <td>{{name.id}}</td>
        <td>{{name.firstName}}</td>
        <td>{{name.lastName}}</td>
        <td>{{name.middleName}}</td>
      </tr>


  </tbody>

</table>

我的component.ts

My component.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { NetworkService } from './../services/network.service';
import { Subject } from 'rxjs/Rx';
import { Router } from '@angular/router';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-namedetails',
  templateUrl: './namedetails.component.html',
  styleUrls: ['./namedetails.component.css']
})
export class NameDetails implements OnInit {

@ViewChild("myTable") myTable:DataTableDirective;

  private nameList: any;
  private selectedName:string;

  private retrievedNames: any;
  dtTrigger: Subject<any> = new Subject();

  dtElement: DataTableDirective;

  dtOptions: DataTables.Settings = {};


  constructor(private _http:Http, private networkservice : NetworkService,private router: Router) { 
 }

  ngOnInit() {

      this.fetchFirstNames();

  }

  fetchFirstNames(){

    this.networkservice.getAllFirstNames()
          .subscribe(

            res => {
              console.log(res);
              this.nameList = res;
            });

  }

  fetchAllDetails(){

    this.networkservice.getAllNames(this.selectedName)
          .subscribe(

            res => {
              console.log(res);
              this.retrievedNames = res;
              this.myTable.dtInstance.then((dtInstance: DataTables.Api) => {
                  // Destroy the table first
                  dtInstance.destroy();
                  // Call the dtTrigger to rerender again
                  this.dtTrigger.next();
                });
            });

  }


  getData(){

      this.fetchAllDetails();
  }

}

但是，我一直收到以下错误-无法读取未定义的属性'then'".我该如何解决?

However I keep getting the following error - "Cannot read property 'then' of undefined". How do I resolve this ?

推荐答案

您需要在component.ts类中添加以下方法:

You need to add the following method to your component.ts class:

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

否则，永远不会触发实例的初始化，因此永远不会首先创建dtInstance.这就是为什么它为空的原因.

Otherwise the initialisation of the instance is never triggered, so the dtInstance is never created in the first place; which is why it is null.

这篇关于在Angular 2中渲染数据表-dtInstance.then错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！