ng2-order-pipe ne trie pas après avoir ajouté/supprimé des objets

Question

Dans mon application, j'affiche un div pour chaque objet de mon tableau et j'utilise le ng2-order-pipe pour les trier :

<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>

Lorsque mon application démarre, ils sont triés. Cependant, comme il est possible de glisser et de déposer ces div's, je déplace les objets d'avant en arrière entre deux composants. Lorsque je déplace un objet vers l'autre composant, puis vers l'arrière, les divisions ne sont plus triées et je dois à nouveau cliquer sur le bouton de tri.

Existe-t-il un moyen de faire en sorte que les objets soient automatiquement triés à nouveau lorsque des objets sont ajoutés au tableau ? Merci.

Answer 1

Avez-vous essayé avec pur comme ci-dessous :

Regardez ici pour plus de détails : 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

J'ai résolu ce problème en créant mon propre impure tuyau :

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;
  }

}

Apparemment, ng2-order-pipe est un pure pipe, et les pure pipes ne sont exécutés que lorsque des changements purs sont détectés, par exemple des valeurs d'entrée primitives modifiées ou des références d'objets modifiées. Dans mon cas, j'utilise le même tableau tout le temps, donc quand j'y ajoute de nouveaux objets, la référence à mon tableau est toujours la même et donc le pipe ne sera pas exécuté. Vous pouvez en savoir plus sur les pipes purs et impurs ici : https://angular.io/guide/pipes