html - Angular 6 DataTables - 表项在排序或搜索时出现/消失
问题描述
我正在使用 Angular-DataTables 6.0(在此处找到https://l-lin.github.io/angular-datatables/#/welcome)并且我遇到了一个反复出现的问题。添加或删除表项时,记录在排序或搜索时消失或重新出现。这可能是因为添加/删除是从数据表外部发生的吗?
我尝试添加许多其他建议的“datatable="ng" 修复程序,但这并没有改变任何东西。我还尝试添加重新渲染功能,但在这种情况下,我遇到了无法解决的“对象取消订阅”错误。作为参考,可以在这里找到一些类似的问题:类似的例子包括:(角度:排序数据表后丢失的数据)(角度数据表中括号内的数字排序)(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>
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();
});
}
这只是代码的一部分,所以如果您需要查看更多内容,请询问。感谢您提供的任何帮助!
解决方案
我有同样的问题很长时间了。经过大量堆栈溢出和文档,我找到了解决我问题的解决方案。也许它也对你有帮助。
允许销毁数据表
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
我希望这可以帮助你。
推荐阅读
- c# - 如何在 Blazor WebAssembly 中删除 Origin 标头
- newrelic - Newrelic 显示没有任何数据库用户的 SQL Server 指标
- python - Appium 在连接的真实设备(android)上启动脚本,而不是在已经打开的模拟器上
- c# - “文件正在被另一个进程使用”:如何释放 ObservableCollection 绑定正在使用的文件
- reactjs - Firestore Timestamp orderBy Desc
- jsf - 为什么 PrimeFaces 的 FileUpload 事件有时无法正确加载文件?
- javascript - Javascript无延迟播放无限循环音频文件
- next.js - EACCES :Permission denied open 'image/url...' : 当尝试在 nextjs 中上传图片时
- python - Win32Com:添加一个新的 Excel 文件并另存为 .xlsm
- javascript - 如何匹配数组的结构?