Datatableの再初期化 - 角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(); 
    } 
} 

私はドロップダウンリストの値を変更するたびに - 私は、「DataTableの警告という警告を取得：テーブルID = namesTableを - することはできませんこのエラーの詳細については、http://datatables.net/tn/3 "を参照してください。データテーブルを何度も再初期化することは許されないことを理解しています。

アイテムがドロップダウンで選択/変更されるたびに、データテーブルの古いインスタンスを破棄して、新しいものを作成/再初期化したいとします。

どのように角度2でこれを行うのですか？

UPDATE - このLinkは、私はエラーを取り除く助けたが、私はretrievedNamesオブジェクトの参照が変更されていない可能性がありますので、それがあるhere

Answer 1

を掲載している別の問題に遭遇しました。 getData()は変数を明確と呼ばれ、以下のようにそれをリロードさ 、このデータテーブルによってそのよう

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

を除去し、再びロードされます。