javascript - 基于排序数组更新组件。 Angular (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));
    }

所有控制台日志都是为了调试器可见性，输出如下:

我的测试文件(非 Angular )中的位置如下所示:(其中 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)，我希望修复此功能有所帮助。