Question

从Angular 2升级到Angular 4之后，primeng数据表被窃听，因为它没有看到列表中作为数据传递的更改。

例如，我有一个数据表：

<p-dataTable selectionMode="single" [resizableColumns]="true" [rows]="20" [paginator]="true" [value]="queuedJobs" [rowHover]="true" [globalFilter]="gb" [style]="{'cursor':'pointer'}">

</p-dataTable>

当我修改“queuedJobs”数组时，数据表内容不会改变Angular 2中的内容。如何解决？你有同样的错误吗？

此致 Mateusz

Answer 1

我们的项目确实存在同样的问题。 I think the answer lies in the way PrimeNG handles value changes：

@Input() get value(): any[] {
    return this._value;
}

set value(val:any[]) {
    this._value = val ? [...val] : null;
    this.handleDataChange(); //filter the value 
}

我的猜测是，不知何故，<p-dataTable/>的内部数组值与您正在修改的数组的实例不同，因此更改不反映。

临时解决方法是每次修改数组时强制数组为新实例：

//...after you've done your array updates
this.queuedJobs = this.queuedJobs.slice(); // does a shallow clone of the array

现在，调用<p-dataTable/>的{{1}}方法，并重新呈现数据。

这不是一个永久的解决方案。希望下一版本的primeng能解决这个问题。

编辑：我现在意识到这是由于他们在内部设置数组的方式：

handleDataChange

这基本上克隆了数组，因此您的更改将永远不会被反映出来。肯定是一个bug。

编辑2 ：正如talpaz所指出的那样this is a part of the design，所以必须在添加或删除元素后创建一个新数组。

Answer 2

似乎是一种改变＆＃34;设计＆＃34; ...

见 https://github.com/primefaces/primeng/issues/2606

Answer 3

其他任何人遇到同样的问题，请通过the part where they describe change detection

DataTable使用基于setter的检查或ngDoCheck来实现基础数据是否已更改以更新UI。这是使用不可变属性配置的，当启用（默认）基于setter的检测时，因此您的数据更改（如添加或删除记录）应始终创建新的数组引用，而不是操纵现有数组，因为Angular不会触发setter参考不会改变。例如，在删除项目时使用 se切片而不是拼接，或者在添加项目时使用扩展运算符而不是push方法。另一方面，将immutable属性设置为false可以通过使用带有IterableDiffers的ngDoCheck来监听更改，而无需创建新的数据引用，从而消除了此限制。基于Setter的方法更快，但根据您的偏好可以使用这两种方法。请注意，immutable属性还定义了DataTable如何处理数据，例如，当启用不可变时，排序不会改变原始数据，而是创建一个新的排序数据数组。

此后还有一个分页器重置的例子

＆＃13;

export class DataTableDemo implements OnInit {

    cars: Car[];

    first: number = 0;

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }

    reset() {
        this.first = 0;
    }
}

＆＃13;

<p-dataTable [value]="cars" [rows]="10" [paginator]="true" [(first)]="first">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

<button type="button" (click)="reset()" label="Reset"></button>

＆＃13;

这些选项应该对你有好处！

Answer 4

我在html的p-datatable标签中添加了[immutable] =“ false”。它对我有用。

将Angular升级到4后，修改了PrimEng数据表更改检测

4 个答案: