在Angular 2 - dtInstance中重新渲染Datatable。然后错误

我在我的角度2应用程序中有一个组件，它有一个下拉列表和一个数据表。根据从下拉列表中选择的名称，我想在数据表中显示详细信息。在Angular 2 - dtInstance中重新渲染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

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

}

不过，我不断收到以下错误 - “无法读取的未定义的属性 '然后'”。我该如何解决这个问题？

来源

2017-07-02 Shiv Baral

可能重复[Reinitialize Datatable-Angular 2]（https://stackoverflow.com/questions/44864875/reinitialize-datatable-angular-2） – Aravind

用问题解决方案更新上一个问题... this是一个后续问题！已经更新 –

。你还面临什么问题 – Aravind

您需要将下面的方法添加到您的component.ts类：

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

否则实例的初始化永远不会触发，所以在第一个地方是从来没有创建dtInstance;这就是为什么它是空的。

来源

2017-12-30 15:13:58 Molloch

在Angular 2 - dtInstance中重新渲染Datatable。然后错误

回答

相关问题