时间戳

首页 > 解决方案 > 数组更改时刷新 ng2-smart-table

angular - 数组更改时刷新 ng2-smart-table

问题描述

你好，下午好，

ng2-smart-table 的创建者通知我在此处打开帖子而不是电子邮件，因此其他程序员也可以从这个问题中受益。我要做的是在修改用于绑定它的数组时刷新数据表。它背后的 porpuse 是一个过滤器，直接作用于数组，删除元素或添加元素。这是一个简单的例子，说明它现在是如何工作的：

let arr = [];
//fill arr with data
let arrayData = arr;

像这样，它可以工作，因为在 html 中我有 [data]='arrayData'

问题是它原来是一个缓慢的过滤器，我总是用它的所有元素创建表。我已经更改了过滤器的方法，只使用 splice 从数组中添加或删除必要的元素来删除和推送添加，所以我不会每次都重新创建数组并包含所有需要的元素。数组确实发生了变化，并且按预期工作，但问题是修改后的数组对数据表没有影响，它一直显示它的旧状态，就好像数组没有修改一样。我在数据表的 git hub 论坛上遇到了一些解决方案，但它们都不适合我的情况。我相信我在这个项目中有一些不同。我创建了使用数据包的组件，作为通用表，由某些页面使用。我正在应用的过滤器属于特定页面。在那个页面中，

<app-datatable id="tableSpecific" class="last-fixed" [(columns)]="columns" [data]="arrayData"[paging]='false' (emmitClick)="apply($event.data)"></app-datatable>

app-datatable 组件具有以下 HMLT：

<ng2-smart-table [settings]="config" [source]="data" (userRowSelect)="clickEmmiter($event)"></ng2-smart-table>

因此，修改数组的过滤器的实现在不同的页面上。唯一将这两个结合在一起的是

[data]= array

我能做些什么来强制刷新数据表或其他东西？

标签： angularng2-smart-table

解决方案

查看 ng2-smart 无法知道您已经更新了外部数组，唯一的方法是传入一个新数组，您可以这样做

arrayData = [...arrayData];

ng2-smart-table 有一个包装类，你可以利用它来更新你的数组。

import { LocalDataSource } from 'ng2-smart-table';

您可以使用将数组传递到此包装器并使用其函数操作数组，查看代码https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib /data-source/local/local.data-source.ts

它具有前置、附加、删除等功能。

有关如何将数组传递到 LocalDataSource 包装器的示例用法 https://akveo.github.io/ng2-smart-table/#/examples/using-filters

推荐阅读