Angular 6 DataTables - 表格项目在排序或搜索时出现/消失

Question

我正在使用 Angular-DataTables 6.0（可在此处找到https://l-lin.github.io/angular-datatables/#/welcome）并且我遇到了重复出现的问题。当添加或删除表项时，记录会在排序或搜索时消失或重新出现。这可能是因为添加/删除是从数据表外部发生的吗？

我尝试添加“datatable=”ng“”修复许多其他人建议的问题，但这并没有改变任何东西。我还尝试添加重新渲染功能，但在这种情况下，我遇到了无法解决的“对象取消订阅”错误。作为参考，可以在这里找到一些类似的问题：类似的例子包括：（Angular ：对数据表进行排序后丢失数据）（对角度数据表中括号内的数字进行排序）（https://github.com/l-lin/angular-datatables /问题/852）

这是我的代码：

HTML:
  <table datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover" id="t1">
                <thead>
                        <tr>
                                <th>
                                    <button id="b5">Asset ID</button>
                                </th>
                                <th>
                                    <button id="b5">Employee ID</button>
                                </th>
                                <th>
                                    <button id="b5">Asset Type</button>
                                </th>
                                <th>View</th>
                                <th>Delete</th>
                              </tr>
                              </thead>
        <tbody>
        <tr *ngFor="let a of assets; let i = index"> 
          <td>{{ a.assetID }}</td>
          <td>{{ a.currentUser }}</td>
          <td>{{ a.assetType }}</td>
          <td><button id="button1" (click)="viewAsset(a)"><i class="fas fa-search"></i></button></td>
          <td><button id="b2" class="btn" (click)="scrapAsset(a)" (mouseenter)="buttonHover(i)" (mouseleave)="buttonHoverLeave(i)"><i class="{{buttonIconArray[i].text}}"></i></button></td>
        </tr>
        </tbody>
        </table>
-elsewhere in the code-
         <button class="btn" id="b1" (click)="addAsset()">Add New Asset</button>&nbsp;

TS

   dtOptions: DataTables.Settings = {};
   dtTrigger = new Subject();

 addAsset()
 {
this.confirmChanges = false;
//Create a new asset:
let a: Asset = {
  assetID: this.assetID,
  currentUser: this.currentUser,
  assetType: this.dropdownMessage,

}
//send a notification to the user that owns the new asset
  let notify: Notice = {
  emplyID: a.currentUser,
  notificationSource: "Asset",
  details: "A new " + this.dropdownMessage + " was added to your assets.",
  timeStamp: new Date()
}

//Add the asset to the server
this.AssetsService.addAsset(a)
      .subscribe(asset => { this.assets.unshift(asset);
                            //All of the inputs need to be emptied
                            this.clearFields(); 
                          })
}

scrapAsset(a: Asset)
{
console.log("The ID is " , a.assetID)
//this.AssetsService.deleteAsset(this.currentAsset).subscribe()
this.confirmChanges = false;



//This deletes the asset from the back-end.
this.AssetsService.deleteAsset(a).subscribe(() => { 
  console.log('test')
  this.assets = this.assets.filter(t => t !== a);
  this.NotificationsService.addNotice(notify).subscribe();
  this.clearFields(); });
  }

dtActivate()
 {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 7,
order: (this.assets.assetType),
orderClasses: false,
};
this.AssetsService.getAssetsIT().subscribe((assetsImported) => {
this.assets = assetsImported;
this.parseData();
  // Calling the DT trigger to manually render the table
  this.dtTrigger.next();
});
}

这只是代码的一部分，因此如果您需要查看更多内容，请询问。感谢您提供的任何帮助！

Answer 1

我已经有同样的问题很长一段时间了。经过大量堆栈溢出和文档之后，我找到了解决我的问题的解决方案。也许它对你也有帮助。

允许数据表被破坏

ngOnInit() {
  this.dtOptions = {
    destroy: true,
    ...
  };
  ...
}

接收新项目的方法（在编辑、插入、添加...后调用）。

onReceived(items){
    let isFirst = this.items.length === 0;
    this.items = <itemsModel[]>items;

    if (isFirst)
      this.dtTrigger.next();
    else
      this.rerender();
}

重新渲染如文档中所示

rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
    });
}

https://l-lin.github.io/angular-datatables/#/advanced/rerender

我希望这可以帮助你。