Inverser angulaire 2 * ngFor

<li *ngFor="#user of users ">
    {{ user.name }} is {{ user.age }} years old.
</li>

Est-il possible d'inverser le ngFor que les éléments sont ajoutés de bas en haut?

28
demandé sur daniel 2016-02-29 18:26:35

8 réponses

Vous devez implémenter un tuyau personnalisé qui exploite la méthode inverse du tableau JavaScript:

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe {
  transform(value) {
    return value.slice().reverse();
  }
}

Vous pouvez l'utiliser comme ça:

<li *ngFor="let user of users | reverse">
    {{ user.name }} is {{ user.age }} years old.
</li>

N'oubliez pas d'ajouter le tube dans l'attribut pipes de votre composant.

43
répondu Thierry Templier 2017-12-08 16:19:39

Vous pouvez simplement utiliser .reverse() de JavaScript sur le tableau. Vous n'avez pas besoin d'une solution spécifique angulaire.

<li *ngFor="#user of users.slice().reverse() ">
   {{ user.name }} is {{ user.age }} years old.
</li>

Voir plus ici: https://www.w3schools.com/jsref/jsref_reverse.asp

24
répondu André Góis 2018-04-18 20:56:47

Cela devrait faire l'affaire

<li *ngFor="user of users?.reverse()">
  {{ user.name }} is {{ user.age }} years old.
</li>
14
répondu Prank100 2017-07-31 05:17:51

Il y a deux problèmes avec la réponse sélectionnée:

Tout d'abord, le tube ne remarquera pas la modification du tableau source, sauf si vous ajoutez pure: false aux propriétés du tube.

Deuxièmement, , le tuyau ne prend pas en charge la liaison bidirectionnelle, car la copie du tableau est inversée, pas le tableau lui-même.

Le code final ressemble à:

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  transform (values) {
    if (values) {
      return values.reverse();
    }
  }
}

Plunker

Http://plnkr.co/edit/8aYdcv9QZJk6ZB8LZePC?p=preview

10
répondu Dan 2017-06-28 14:26:59

Mise à Jour

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  constructor(private differs:IterableDiffers) {
    this.differ = this._differs.find([]).create(null);
  }

  transform(value) {
    const changes = this.differ.diff(value);
    if(changes) {
      this.cached = value.slice().reverse();
    }
    return this.cached;    
  }
}

Angular par défaut n'appelle pas le tuyau lorsque des éléments sont ajoutés ou supprimés dans/Depuis le tableau, car la détection des changements angulaires par défaut ne compare que les changements d'instance de tableau.

Pour que le tuyau soit appelé chaque fois que la détection de changement est appelée, j'ai rendu le tuyau impur. Un tuyau impur sera appelé très souvent, il est donc important qu'il fonctionne efficacement. Créer une copie d'un tableau (peut-être même un grand tableau), puis inverser son ordre est assez cher.

Par conséquent, une différence consiste à ne faire le travail réel que si certaines modifications ont été reconnues et à renvoyer le résultat mis en cache de l'appel précédent.

Original

Vous pouvez créer un tuyau personnalisé qui renvoie le tableau dans l'ordre inverse ou simplement fournir les données dans l'ordre inverse en premier lieu.

Voir aussi

4
répondu Günter Zöchbauer 2017-07-17 10:27:44

L'utilisation de transform nécessite PipeTransform:

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

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

export class ReversePipe implements PipeTransform {
  transform (values: any) {
    if (values) {
      return values.reverse();
    }
  }
}

Appelez-le avec <div *ngFor="let user of users | reverse">

2
répondu Denise Mauldin 2017-07-25 23:42:09

On peut utiliser ngx-tuyaux

Npm install ngx-tuyaux-enregistrer

Module

import {NgPipesModule} from 'ngx-pipes';

@NgModule({
 // ...
 imports: [
   // ...
   NgPipesModule
 ]
})

Composant

@Component({
  // ..
  providers: [ReversePipe]
})
export class AppComponent {
  constructor(private reversePipe: ReversePipe) {
  }
}

Puis en utilisant dans le modèle <div *ngFor="let user of users | reverse">

1
répondu rey_coder 2018-09-03 00:01:18

Si quelqu'un utilise typescript, voici comment j'ai réussi à le faire fonctionner, en utilisant la réponse de @Günter Zöchbauer.

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

  differs: any
  cashed: any
  constructor(private _differs: IterableDiffers) {
    this.differs = this._differs.find([]).create(null);
  }
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value, ...args) {
    const changes = this.differs.diff(value)
    if (changes) {
      this.cashed = value.slice().reverse();;
    };
    return this.cashed
  }
}
0
répondu Saud 2017-08-04 09:44:58