Angular ngFor 没有以正确的顺序迭代

Question

从后端获取一些数据后，我得到一个数组数组，我使用 *ngFor 迭代创建一个 table。我将它存储在名为“lista”的属性中。这是我得到的数组数组：

0: (4) ["12.167.143-3", "Ximena Araya Guajardo", "D", "2021-04-19T04:00:00.000Z"]
1: (4) ["18.545.597-1", "Johanna Muñoz Infante", "A2", "2021-04-19T04:00:00.000Z"]
2: (4) ["12.167.143-3", "Ximena Araya Guajardo", "E", "2021-04-19T04:00:00.000Z"]
3: (4) ["23.456.789-2", "Nombre_1 ApellidoPaterno_1 ApellidoMaterno_1", "C", "2021-04-20T04:00:00.000Z"]
4: (4) ["16.134.145-8", "Luciano andres Arce Sepulveda", "A1", "2021-04-20T04:00:00.000Z"]

如果你看到了，第一个寄存器是2021-04-19，最后一个是2021-04-20。

它工作正常并且渲染良好，但现在我需要 table 按日期排序，最近的日期必须首先显示。我用它来反转列表：

this.listaOrderedByDate = this.lista.sort(function(a, b) {
            return (b[3] < a[3]) ? -1 : ((b[3] > a[3]) ? 1 : 0);
        });

其中[3] 是传递给排序方法的每个数组中日期的索引。

列表颠倒了：

0: (4) ["23.456.789-2", "Nombre_1 ApellidoPaterno_1 ApellidoMaterno_1", "C", "2021-04-20T04:00:00.000Z"]
1: (4) ["16.134.145-8", "Luciano andres Arce Sepulveda", "A1", "2021-04-20T04:00:00.000Z"]
2: (4) ["12.167.143-3", "Ximena Araya Guajardo", "D", "2021-04-19T04:00:00.000Z"]
3: (4) ["18.545.597-1", "Johanna Muñoz Infante", "A2", "2021-04-19T04:00:00.000Z"]
4: (4) ["12.167.143-3", "Ximena Araya Guajardo", "E", "2021-04-19T04:00:00.000Z"]

现在，元素索引为 3、日期为 2021-04-20 的数组位于顶部，日期为 2021-04-19 的数组位于底部。

但是，如果我在 HTML 中使用 *ngFor 这个新的属性“listaOrderedByDate”进行迭代，它仍会打印原始数组（名为“lista”的那个），渲染顺序根本没有改变。尽管倒排数组的日志说明了一些事情，但最终视图说明了另一件事，我仍然将最旧的日期放在顶部，将新日期放在底部。它不是按自然顺序迭代。我不知道为什么。你能帮我一把吗？

Answer 1

我认为 this.listaOrderByDate 只是指向与 this.lista 相同的内存位置。您可以使用 Spread 运算符为 this.listaOrderByDate 数组分配新内存。

    this.listaOrderedByDate = [...this.lista].sort(function (a, b) {
      return (b[3] < a[3]) ? -1 : ((b[3] > a[3]) ? 1 : 0);
    });

Angular ngFor 没有以正确的顺序迭代

Angular ngFor not iterating in the right order

arrays

angular

ngfor