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?
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.
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
Cela devrait faire l'affaire
<li *ngFor="user of users?.reverse()">
{{ user.name }} is {{ user.age }} years old.
</li>
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
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
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">
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">
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
}
}