为什么 array.push 不适用于 Angular4 和 PrimeNG 中持有 table 数据的集合？

Question

因此具有以下标记：

<p-dataTable
                                    selectionMode="single"
                                    [(selection)]="selectedUsers"
                                    dataKey="id"
                                    [value]="users"
                                    [rows]="25" [paginator]="users.length>25" [pageLinks]="3"
                                    [rowsPerPageOptions]="[10,25,50,100]"
                                   >

我正在执行以下操作以将记录添加到 table

applySelectedUsers() {
    // this.users.push(this.selectedUserToAdd);
    let arr=[];
    arr.push(this.selectedUserToAdd);
    this.users=this.users.concat(arr);
    this.selectedUserToAdd=null;
    this.hideUsersDialog();
}

我的问题是，为什么注释行不起作用？记录在 table 中不可见，尽管 console.log(this.users) 显示每次推送后集合都在增长

Answer 1

PrimeNG 的数据表查找引用中的更改，因此它需要不可变数据。如果你不需要利用不变性给你带来的好处，你只需将 p-dataTable 的 [immutable] 属性设置为 false。但请记住，它会强制数据表在每个 ngDoCheck 生命周期中检查您绑定到 [value] 属性的集合，从而导致性能下降。

你可以很好地看到它在源代码的视图中没有改变的原因

 set value(val:any[]) { // this will be triggered only by reassigning to this.users
        if(this.immutable) {
            this._value = val ? [...val] : null;  
            this.handleDataChange();
        }
        else {
            this._value = val;
        }

        this.valueChange.emit(this.value);
    }

现在，如果您从不重新分配并将 [immutable] 设置为 false，它将检查生命周期中的差异

    ngDoCheck() {
    if(!this.immutable) {
        let changes = this.differ.diff(this.value);
        if(changes) {
            this.handleDataChange();
        }
    }
}

希望对您有所帮助。祝你有美好的一天，不要反应 :)

为什么 array.push 不适用于 Angular4 和 PrimeNG 中持有 table 数据的集合？

Why array.push does not work on collection holding table data in Angular4 and PrimeNG?

primeng

angular

primeng-datatable