Question

在我的应用程序中，我为数组中的每个对象显示一个div，并使用ng2-order-pipe对它们进行排序：

<div class="patients-container" (dragover)="allowDrop($event)" (drop)="onDrop($event)">
  <div class="patient-box" draggable="true" *ngFor="let patient of patients | orderBy: order" (dragstart)="onDrag($event, patient)">
    <table class="patient-table">
    <th class="location-header">
      <p class="location" (click)="openEditPatientDialog(patient)">{{patient.location}}<md-icon>edit</md-icon></p>
      <p class="name" [style.visibility]="patient.name == '' ? 'hidden' : 'visible'">{{patient.name}}</p>
      <p class="triage"><md-icon [style.color]="patient.severity">favorite</md-icon></p>
    </th>
    <th class="intervals-header"> 
      <table>
        <tr *ngFor="let interval of intervals">
          <td>{{interval}}</td>
        </tr>
      </table>
     </th>
    <tr>
      <td></td>
    </tr>
    </table>
  </div>
</div>

当我的应用程序启动时，它们会被排序。但是，因为可以拖放这些div，所以我在两个组件之间来回移动对象。当我将一个对象移动到另一个组件然后返回时，div不再排序，我将不得不再次点击我的排序按钮。

当对象添加到数组时，有没有办法让它再次自动排序对象？谢谢。

Answer 1

您是否尝试使用纯属性，如下所示：

请点击此处了解更多详情：https://blog.khophi.co/ionic-2-filter-templates-pipes/

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: 'orderBy', pure: true })
export class OrderByPipe implements PipeTransform {
    transform(array: Array<any>, orderField: string, orderType: boolean): Array<string> {
        array.sort((a: any, b: any) => {
            if (a[orderField] == null || a[orderField].isUndefined) return orderType ? 0 - b[orderField] : b[orderField] - 0;
            if (b[orderField] == null || b[orderField].isUndefined) return orderType ? a[orderField] - 0 : b[orderField] - 0;
            return orderType ? a[orderField] - b[orderField] : b[orderField] - a[orderField];
        });
        return array;
    }
}

Answer 2

我通过创建自己的自定义impure管道解决了这个问题：

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

@Pipe({
  name: 'orderBy',
  pure: false
})
export class OrderByPipe implements PipeTransform {

  transform(array: Array<any>, orderProperty: string): Array<any> {
    array.sort((a: any, b: any) => {
      if (a[orderProperty] < b[orderProperty]) {
        return -1;
      } else if (a[orderProperty] > b[orderProperty]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }

}

显然，ng2-order-pipe是纯管道，只有在检测到纯变化时才会执行纯管道，例如。更改了原始输入值或更改了对象引用。在我的情况下，我一直使用相同的数组，所以当我向它添加新对象时，对我的数组的引用仍然是相同的，因此管道将不会被执行。您可以在此处阅读有关纯管道和不纯管道的更多信息：https://angular.io/guide/pipes

添加/删除对象后，ng2-order-pipe不排序

2 个答案: