primeNG 可排序 <p-table not loading if user clicked sort first

Question

我有一个

https://stackblitz.com/edit/primeng-tablesort-demo-sr8pbj?file=src%2Fapp%2Fapp.component.ts

如果页面加载后您做的第一件事是单击按钮，它将加载表格并显示数据（按预期工作），但是如果您重新加载页面并首先单击任何列的排序图标，然后单击按钮，数据未显示在表中。

数据实际上被加载到分配给[value]的数组中，但没有渲染。

示例中的注释实际上有一个解决方法。 问题的重点是确定导致错误的原因。是 .push 方法中的东西吗？ primeng中有什么东西吗？或者像在将元素附加到数组时无法检测到数组已更改之类的角度？我倾向于最后一个，但不知道如何进一步追踪它，也不知道如何解释行为的差异 - 首先单击排序时。

Answer 1

实际上，您遇到的行为取决于 JavaScript

push

方法和 Angular 中的

@Input

属性机制。

首先，关于JavaScript中的

push

方法：

使用

push

方法的结果取决于您推入数组的数据类型。当您推送对象或数组时，JavaScript 会添加对原始对象或数组的引用。但是，对于数字或布尔值等基本类型，JavaScript 会推送值的副本。这种区别至关重要，因为它会影响推送元素的更改如何反映在原始数组中。要更深入地研究这个主题，您可以浏览这篇文章：JavaScript Array.push() 是深拷贝还是浅拷贝？.

其次，关于 Angular 中的

@Input

属性：

在 Angular 中，

@Input

属性会在其绑定的数据引用发生变化时检测到变化。当您使用扩展运算符或任何其他创建新数组或对象的方法时，它确实会更改数据的引用。因此，Angular 的变更检测机制应该检测这些变更，并且当产品变更时应该通知组件。

总而言之，您观察到的行为是以下因素的组合： JavaScript 处理

push

以及 Angular 的

@Input

属性如何工作。