web-dev-qa-db-fra.com

Angular 2 ngFor - inverse l'ordre de sortie en utilisant l'index

Essayer d'apprendre quelque chose sur le filtrage et la commande dans Angular 2. Je n'arrive pas à trouver de ressources décentes et je suis coincé sur la façon de commander une sortie ngFor dans l'ordre inverse en utilisant l'index. J'ai écrit le tuyau suivant, il ne cesse de me donner des erreurs que la tranche de tableau n'est pas une fonction.

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(arr) {
        var copy = arr.slice();
        return copy.reverse();
    }
}

et mon ngfor ressemble à ceci.

<div class="table-row generic" *ngFor="let advert of activeAdverts | reverse let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">      
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>
javascriptangularangular2-pipe
7
Hamburgersn Heroin

Pour de tels cas d'utilisation courants, je vous suggère d'utiliser le reverse pipe du module ng-pipes: https://github.com/danrevah/ng-pipes#reverse-1

Du DOCS:

dans le contrôleur: 

this.items = [1, 2, 3];

dans la vue: 

<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->
9
D_R

J'ajouterais également .slice()

*ngFor="let advert of activeAdverts.slice().reverse() let i = index;"
7
Chris Skura

Je pense que @BhaskerYadav a donné la meilleure réponse. Changer la matrice d'origine est une mauvaise idée et son idée n'a aucun effet secondaire, performance ou autre. À mon humble avis, il a juste besoin d'une légère amélioration car tout ce déréférencement d'index est illisible à l'échelle.

<tr *ngFor="let _ of activeAdverts; let i = index">
  <ng-container *ngIf="activeAdverts[activeAdverts.length-i-1] as advert">
    <td>{{advert.p}}</td>
    <td>{{advert.q}}</td>
    ...
  </ng-container>
</tr>
3
Mark Florence

En utilisant la méthode suivante, u peut inverser la sortie, mais le tableau d'origine ne sera pas modifié,

 <tr *ngFor="let advert of activeAdverts; let i = index" >
           <td>{{activeAdverts[activeAdverts.length-i-1]}}</td>
  </tr>
2
BhaskerYadav

Le moyen le plus simple que j'ai pu faire fonctionner est d'utiliser simplement activeAdverts.reverse(). Dans ton cas:

<div class="table-row generic" *ngFor="let advert of activeAdverts.reverse() let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">      
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>

J'ai trouvé cette réponse pour faire l'affaire

1
Pini Cheyni

Utilisez ceci

*ngFor="let item of items.slice().reverse()"
0
Trilok Singh

Lodash reverse a fonctionné pour moi.

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)
0
Sampath