Angular 角度新手问题：sort（）无效

我试图学习一些角度的基本概念，但遇到了一个无法解决的问题

我正在使用管道对数字数组进行升序和降序排序

但不知道为什么代码没有按它应该的方式工作

pipe.ts：

export class SortNumberPipe implements PipeTransform {

    transform(arrNumber: any[], args: number): any {
        if (args == 1)
        {
                var asc =  arrNumber.sort((a,b) => {
                return a-b;
            })
            return asc;
        } 
        if (args == -1)
        {
                var desc =  arrNumber.sort((a,b) => {
                return b-a;
            })
            return desc;
        }

模板文件：

<table class="table table-hover">
        <thead>
            <tr>
                <th>Input</th>
                <th>Result {{sortValue}}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{arrNumber}}</td>
                <td>{{arrNumber| sortNumber: sortValue}}</td>
            </tr>
        </tbody>
</table>    
<button type="button" class="btn btn-default" (click) = "onCompare(1)">Asc</button>
<button type="button" class="btn btn-warning" (click) = "onCompare(-1)">Desc</button>

以下是我的代码示例：

---

谢谢大家!

.sort

方法对数组进行变异。所以实际上管道改变了数组，但是对这个数组的引用并没有改变，所以Angular并没有看到触发rerender的差异

该函数实际上使用就地算法，其中，算法仅通过替换或交换元素来更新输入序列。因此数组的引用不会更改

返回值将是排序后的数组。请注意，数组是就地排序的，不进行复制

因此，Angular看不到触发重新渲染的差异

如果必须使用管道，可以通过将此对象的新实例指定为以下对象来解决此问题：

public onCompare(args) {
       this.sortValue = args;
       this.arrNumber = [...this.arrNumber];
}

---

但我建议您删除管道并在单击按钮时调用函数，因为管道基本上用于转换角度模板中的值。

我认为管道是错误的方法。单击按钮对组件中的数组进行排序，您将得到所需的结果。感谢您的帮助回答，但我不知道为什么使用Sort（）时，对数组的引用不会更改？你能给我一些解释这件事的文章吗？谢天谢地，sort（）函数实际上使用的是就地算法，其中，算法仅通过替换或交换元素来更新输入序列。因此数组的引用不会更改。考虑：返回值将是排序后的数组。请注意，数组是就地排序的，不进行复制。

public onCompare(args) {
       this.sortValue = args;
       this.arrNumber = [...this.arrNumber];
}