ng2-order-pipe не сортирует после добавления/удаления объектов

В моем приложении я отображаю 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 больше не сортируются, и мне придется снова нажимать кнопку сортировки.

Есть ли способ заставить его автоматически сортировать объекты снова, когда объекты добавляются в массив? Спасибо.


angular angular-pipe
person Jesper    schedule 17.07.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Пробовали ли вы использовать свойство pure, как показано ниже:

Подробнее см. здесь: 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;
    }
}
person Sandip - Frontend Developer    schedule 17.07.2017
comment
Я этого не пробовал. Поскольку я получил трубу через NPM, я не уверен, как ее изменить. Любые идеи? - person Jesper; 17.07.2017

arrow_upward
0
arrow_downward

Я решил это, создав свой собственный канал 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.

person Jesper    schedule 17.07.2017