基于排序数组更新组件。角 (4.3)

Question

使用我们希望能够排序以在组件中显示的数据数组，并且它似乎没有排序或更新 DOM，但是我有一个正确演示该概念的工作代码示例，它应该正在排序，但在 angular 应用程序中，它根本没有被排序。

存储原始数据的父组件将数据存储在名为 的输入参数对象上Batch，我们正在排序的数组位于 上Batch.Invoices.Results。来自子组件的事件没问题，确认合适的数据冒泡到父组件。

应该对数组进行排序的函数如下所示：

 public OnInvoiceSortChange({orderValue, orderAscending}){

        console.log(`Invoice Sorting has been called. Value: ${orderValue} . Ascending? ${orderAscending}`);

        console.log(`Before:`);

        console.log(this.BatchViewModel.Invoices.Results.map(x => x.VendorName));

        const sortingArray = [...this.BatchViewModel.Invoices.Results];

        if(orderAscending){

            const sorted = sortingArray.sort((a, b) => a[orderValue] > b[orderValue] ? 1 : 0);

            this.BatchViewModel.Invoices.Results = sorted;

            console.log('Sorted');

            console.log(sorted.map(x => x.VendorName));

        } else {

            const sorted = sortingArray.sort((a, b) => a[orderValue] < b[orderValue] ? 1 : 0);

            this.BatchViewModel.Invoices.Results = sorted;

            console.log(sorted.map(x => x.VendorName));

        }

        console.log(`After:`);

        console.log(this.BatchViewModel.Invoices.Results.map(x => x.VendorName));

    }

所有控制台日志都用于调试器可见性，输出如下：

在我的测试文件（非角度）中的哪个位置看起来像这样：（哪里data是来自 Angular 应用程序的数组的直接副本。

const ascendingData = [...data];

const descendingData = [...data];

const sortedDescending = descendingData.sort((a, b) => a['VendorName'] < b['VendorName']? 0 : 1)

const sortedAscending = ascendingData.sort((a, b) => a['VendorName'] > b['VendorName']? 0 : 1);

const vendorListAscending = sortedAscending.map(x => x.VendorName);

const vendorListDescending = sortedDescending.map(x => x.VendorName);

console.log(vendorListDescending);

console.log(vendorListAscending);

输出如下所示：

所以我看到排序应该起作用，但它在 Angular 中没有发生。如何对数组进行排序，并同时更新 DOM？

Answer 1

您传递给的函数sort是错误的。它应该为“更少”返回负值，为“更大”返回正值或为“相等”返回零。如果orderValue是数字，则最容易返回a[orderValue] - b[orderValue]，如果不是，则只需将您的更改0为-1.（顺便说一下，名字orderKey可能会更清楚一点？）我认为 angular 在这里没有任何关系，但我现在不知道为什么你会得到不同的结果。无论如何，您的排序函数无效（它指出a等于b，但同时b大于a），我希望修复此函数会有所帮助。