在Angular 2中重新渲染数据表 - dtInstance.then错误

时间:2017-07-02 04:04:29

标签: angular datatable

我的angular 2应用程序中有一个组件,它有一个下拉列表和一个数据表。根据从下拉列表中选择的名称,我想在数据表中显示详细信息。

HTML -

mapFragment = (MapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

我的component.ts

<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>

但是我一直收到以下错误 - “无法读取属性'然后'未定义”。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您需要将以下方法添加到component.ts类:

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

否则永远不会触发实例的初始化,因此首先不会创建dtInstance;这就是为什么它是null。