Question

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

每当我更改下拉列表中的值时 - 我都会收到一条警告说＆＃34; Datatable警告：table id = namesTable - 无法重新初始化DataTable。有关此错误的详细信息，请参阅http://datatables.net/tn/3＆＃34;。我知道不允许一次又一次地重新初始化数据表。

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

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

更新 - 这个Link帮助我摆脱了错误，但我遇到了另一个我发布的问题here

Answer 1

我遇到了类似的问题，但我通过使用以下代码

销毁角度数据表来解决它

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

其中DataTables是我的表的id。你可以在fetchAllDetails（）中编写它。希望它能帮助未来的观众。

Answer 2

这是因为retrievedNames对象的引用可能没有被更改。调用getData()时清除变量并按如下所示重新加载，

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

因此，此数据表将被删除并再次加载。

重新初始化数据表 - Angular 2

2 个答案: