Reinitialize Datatable - Angular 2

Question

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

HTML -

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

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

<table id="namesTable" [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'; 

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

    private nameList: any; 
    private selectedName:string; 

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

    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.dtTrigger.next(); 
      }); 
    } 
    getData(){ 
     this.fetchAllDetails(); 
    } 
} 

每当我更改下拉列表中的价值 - 我得到一个警告说“数据表警告：表ID = namesTable - 无法请重新初始化DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3“。我知道不允许重复初始化数据表。

因此，无论何时在下拉列表中选择/更改项目，我想销毁数据表的旧实例并创建/重新初始化一个新项目。

如何在角度2中做到这一点？

更新 - 这Link帮我摆脱错误的，但我遇到了，我已经发布了here

Answer 1

这是因为retrievedNames对象的引用可能已被变更的另一个问题。 当getData()被称为清除变量和如下面重新加载它，

getData(){ 
    this.retrievedNames = []; 
    this.fetchAllDetails(); 
} 

因此，通过这个数据表将被删除，再次加载。