Question

我正在尝试使用角度数据表来过滤从服务器接收到的数据，但是遇到了问题。遍历订阅中的对象时，搜索不起作用（没有错误消息），但仅将值分配给我的对象数组时，搜索起作用。

我尝试了几种在网上找到的不同实现，但似乎没有一个可行或不够具体。

这是工作代码（credit.component.ts）：

        getCreditList() {
        this.creditService.getCreditList().subscribe(credits => {
            this.credits = credits;
            console.log(this.credits); //outputs all credits as array of objects
            this.dtTrigger.next();
        });
    }

但是，当尝试过滤承诺中的数据时，即使显示的数据是正确的，角度数据表的搜索功能也会被破坏：

        this.creditService.getCreditList().subscribe(credits => {
            credits.forEach((obj, index) => {
                if (obj.deleted_at == null) {
                    this.credits.push(credits[index]);
                }
            });
            console.log(this.credits); // outputs all credits as array of objects where objects deleted_at property equals null
            this.dtTrigger.next();
        });
    }

如果需要其他代码，请参见相关的credit.component.html：

<table datatable [dtOptions]="dtOptions" class="row-border hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>credit</th>
        </tr>
     </thead>
     <tbody>
        <tr
            *ngFor="let credit of credits; let i = index"
            class="col-12 table-row_{{ i }}"
        >
        <td>
            {{ credit.userid }}
        </td>
        <td>
            {{ credit.credit }}
        </td>
        </tr>
      </tbody>
</table>

相关的credit.service.ts：

getCreditList() {
    return this.http.get<Credit[]>(this.url + 'credit');
}

信用等级：

export class Credit {
    id: number;
    credit: number;

    deleted_at: Date;
}

我希望能够像在工作示例中那样使用预先过滤的数据执行搜索。

如果有人能对此神秘事物有所启发，将不胜感激。

谢谢！

编辑：

无论上述代码如何，分页似乎也不起作用。我开始怀疑也许是异步调用的问题，因为数据渲染太晚了或什么？我将如何解决这个问题？任何帮助将不胜感激。

Answer 1

我知道这是一个不好的做法，但对我来说，如果我将触发器置于这样的超时中，它将起作用：

setTimeout(() => {
   this.dtTrigger.next()
}, 1);

Angular 8数据表搜索无法正常工作

1 个答案: