Question

我在我的angular 4中使用Angular Datatable，我在按钮单击时触发了一个函数，该函数过滤数据，但表未更新。有什么建议吗？

HTML

<button (click)="filterData()">Rerender</button>

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" id="activity" class="table table-bordered table-hover">
    <thead #stickyMenu [class.sticky] ="sticky">
        <tr>
          <th>Time</th>
          <th>Entity</th>
          <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = 'let audit of tableFilterData id="audit_{{audit.id}}">
          <td>{{audit.time}}</td>
          <td>{{audit.entity}}</td>
          <td>{{audit.action}}</td>
        </tr>
    <tbody>
</table>

TS文件

dtElement: DataTableDirective; 

filterData() {
    this.tableFilterData = this.auditDetails.filter((obj) => {
        obj.action == 'Create'; 
    });
    this.rerender()
}

rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
    });
}

Answer 1

您的.filter的回调不返回任何值。
尝试以下选项之一（它们都返回相同的结果）：

this.tableFilterData = this.auditDetails.filter((obj) => {
    return obj.action == 'Create'; 
});

或

this.auditDetails.filter((obj) => (obj.action == 'Create'));

或

this.auditDetails.filter(({action}) => (action == 'Create'));

PS。似乎您的*ngFor缺少右引号：

<tr *ngFor='let audit of tableFilterData' id="audit_{{audit.id}}">

过滤后无法刷新Angular Datatable？

1 个答案: