Invertir Angular 2 * ngFor

Simplemente puede usar el .reverse() de JavaScript en la matriz. No necesita una solución específica angular.

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

Ver más aquí: https://www.w3schools.com/jsref/jsref_reverse.asp

Esto debería hacer el truco

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

Hay dos problemas con la respuesta seleccionada:

Primero , la tubería no notará la modificación de la matriz de origen, a menos que agregue pure: false a las propiedades de la tubería.

Segundo, la tubería no admite el enlace bidireccional, porque la copia de la matriz se invierte, no la matriz en sí.

El código final se ve como:

import {Pipe} from 'angular2/core';

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

Émbolo

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

Update

@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 de forma predeterminada no llama a la tubería cuando se agregan o eliminan elementos a/desde la matriz porque Angular change detection de forma predeterminada solo compara los cambios de instancia de la matriz.

Para que se llame a la tubería cada vez que se llame a la detección de cambios, hice que la tubería fuera impura. Una tubería impura se llamará muy a menudo, por lo tanto, es importante que funcione de manera eficiente. Crear una copia de una matriz (tal vez incluso una matriz grande) y luego invertir su orden es bastante caro.

Por lo tanto, una diferencia es hacer solo el trabajo real si algunos cambios fueron reconocidos y de lo contrario devolver el resultado almacenado en caché de la llamada anterior.

Original

Puede crear una tubería personalizada que devuelva la matriz en el orden inverso o simplemente proporcionar los datos en el orden inverso en primer lugar.

Véase también

• angular 2 ordenar y filter
• https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

Usando transform requiere 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();
    }
  }
}

Llámalo con <div *ngFor="let user of users | reverse">

Uno podría usar ngx-pipes

Npm install ngx-pipes save save

Módulo

import {NgPipesModule} from 'ngx-pipes';

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

Componente

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

Luego usando en la plantilla <div *ngFor="let user of users | reverse">

Si alguien está usando typescript aquí es cómo me las arreglé para que funcione, usando la respuesta 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
  }
}