基于排序数组更新组件。角 (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），我希望修复此函数会有所帮助。