我正在使用Angular-DataTables 6.0（在https://l-lin.github.io/angular-datatables/#/welcome处找到），并且遇到了重复出现的问题。添加或删除表项时，记录将在排序或搜索时消失或重新出现。这可能是因为添加/删除是从dataTable外部进行的吗？
我尝试添加'datatable =“ ng”'修复，许多其他建议也提供了此修复，但这并没有改变任何内容。我也尝试添加一个重新渲染功能，但是在那种情况下，我遇到了我无法解决的“对象未订阅”错误。作为参考，可以在此处找到一些类似的问题：类似的示例包括：（angular : lost data after sort datatable） （Sorting of numbers within brackets in angular datatables） （https://github.com/l-lin/angular-datatables/issues/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();
});
}
这只是代码的一部分，因此，如果需要查看更多内容，请询问。感谢您提供的任何帮助！
答案 0 :(得分：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
我希望这会对您有所帮助。
答案 1 :(得分：0)
这将起作用，但是我仍在寻找更好的解决方案
setTimeout(function () {$(function () {$('#ng').DataTable();});}, 10);
答案 2 :(得分：0)
您可以删除ng，以下代码解决了我的问题
<div class="container-fluid">
<div class="page-title">
<h4>Milk Types</h4>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-block">
<a href="" class="btn btn-success" href='' [routerLink]="['/milk/create-milk']">
<i class="ti-zip pdd-right-5"></i>
<span>Add New Milk</span>
</a>
<div class="table-overflow">
<table class="table table-lg table-hover" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let drink of data">
<td>
<div class="mrg-top-15">
<b class="text-dark font-size-16">{{ drink.id }}</b>
</div>
</td>
<td>
<div class="mrg-top-15">
<span class="text-info pdd-left-20"><b>{{ drink.name }}</b></span>
</div>
</td>
<td>
<div class="col-md-5">
<div class="toggle-checkbox toggle-success checkbox-inline">
<input type="checkbox" name="isEnabled" id="toggle4" [checked]="drink.isEnabled">
<label for="toggle4"></label>
</div>
</div>
</td>
<td>
<div class="mrg-top-15">
<span class="text-info"><b>KD {{ drink.price }}</b></span>
</div>
</td>
<td>
<div class="mrg-top-10 text-center">
<a href="" class="btn btn-warning">
<i class="ti-comment pdd-right-5"></i>
<span>Edit</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
import { Component, OnInit, Input, OnDestroy , ViewEncapsulation } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { pipe, Subscription } from 'rxjs';
import { MilksItem, MilksDataSource } from './milks-datasource';
import { Subject } from 'rxjs';
@Component ({
templateUrl: 'milk.html'
})
export class MilkComponent implements OnInit {
dtOptions: DataTables.Settings = {};
subscription: Subscription;
data: MilksItem[] = [];
dtTrigger: Subject<MilksItem> = new Subject();
constructor(private db: AngularFireDatabase)
{
}
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers'
};
this.subscription = this.db.list<MilksItem>('milkTypes').valueChanges().subscribe(d=>{
console.log('data streaming');
this.data = d;
this.dtTrigger.next();
});
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
this.dtTrigger.unsubscribe();
}
}