Angular 角度管道方法不在每次单击中更新数据

我有一根管子：

import { Pipe, PipeTransform } from '@angular/core';
import { orderBy } from 'lodash';

@Pipe({ name: 'sortBy' })
export class SortByPipe implements PipeTransform {

  transform(value: any[], order = '', column: string = ''): any[] {
    if (!value || order === '' || !order) { return value; } // no array
    if (value.length <= 1) { return value; } // array with only one item
    if (!column || column === '') { 
      if(order==='asc'){return value.sort()}
      else{return value.sort().reverse();}
    } // sort 1d array
    return orderBy(value, [column], [order]);
  }
}

我使用以下方法更改了这些内容：

<button (click)="changeOrder('asc')">ASC</button>
<button (click)="changeOrder('desc')">DESC</button>

Order is: {{ order }}

<div *ngFor="let dat of data | sortBy: order">
    {{ dat.name }}
</div>

单击按钮更改顺序每次都会更改订单变量，但不会每次都更改订单，除非我同时单击两个按钮

---

这是怎么回事。。。如何修复此问题？

在管道名称处使用pure:false。像这样：

@Pipe({
  name: 'sortBy',
  pure: false
})

---

你能创建stackblitz吗？我猜这和变化检测有关。可能是在触发事件时单击它会更改变量并进行排序，但视图不会更新，因为数组是在检测到更改后排序的。尝试在管道中添加第二个参数，位于name:``@pipe{name:'sortBy'，pure:false}``旁边。如果这样做可以修复此问题，那么请注意，如果此管道上有长期运行的函数，则可能会降低应用程序的性能。更好地寻找另一个不会减缓你的APP的解决方案。考虑不纯管道的性能问题。检查角度文档。虽然不纯净的管道可能有用，但使用时要小心。长时间运行的不纯管道可能会显著降低应用程序的速度。

@Pipe({
  name: 'sortBy',
  pure: false
})