重新初始化数据表-Angular 2 [英] Reinitialize Datatable - Angular 2

问题描述

我的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)]="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文件-

Component.ts file -

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 =名称表-无法重新初始化数据表。有关此错误的更多信息，请参见 http://datatables.net/tn/3 。我知道不允许一次又一次地初始化数据表。

Whenever I change the value in the dropdown list - I get an alert saying "Datatable warning: table id= namesTable - Cannot reinitialize DataTable. For more information about this error, please see http://datatables.net/tn/3". I understand that reinitializing the datatable again and again is not allow.

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

So whenever an item is selected/changed in the dropdown, I want to destroy the old instance of the datatable and create/reinitialize a new one.

如何在角度2中执行此操作？

How do I do this in angular 2 ?

更新-
此链接帮助我摆脱了错误，但遇到了另一个问题已在此处

UPDATE - this Link helped me get rid of the error but I ran into another problem which I have posted here

推荐答案

我遇到了类似的问题，但是我通过使用以下代码破坏了数据表的角度来解决了这个问题

I was facing the similar issue but I solved it by destroying the datatable in angular using following code

$('#DataTables').DataTable().destroy();

其中DataTables是我的表的ID。
您可以在fetchAllDetails（）中编写该代码。
希望能对未来的观众有所帮助。

where DataTables is my table's id. You can write that in fetchAllDetails(). Hope it will help the future viewers.

这篇关于重新初始化数据表-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！