for - page title angular 4
Invertir Angular 2*ngPara (8)
<li *ngFor="#user of users ">
{{ user.name }} is {{ user.age }} years old.
</li>
¿Es posible invertir el ngPara que los elementos se agreguen de abajo hacia arriba?
Debe implementar una canalización personalizada que aproveche el método inverso de la matriz de JavaScript:
import { Pipe } from ''@angular/core'';
@Pipe({
name: ''reverse''
})
export class ReversePipe {
transform(value) {
return value.slice().reverse();
}
}
Puedes usarlo así:
<li *ngFor="let user of users | reverse">
{{ user.name }} is {{ user.age }} years old.
</li>
No olvide agregar la tubería en el atributo de tuberías de su componente.
El uso de la 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ámelo con <div *ngFor="let user of users | reverse">
Esto debería funcionar
<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.
En segundo lugar , el conducto no admite el enlace bidireccional, porque la copia de la matriz se invierte, no la propia matriz.
El código final se ve así:
import {Pipe} from ''angular2/core'';
@Pipe({
name: ''reverse'',
pure: false
})
export class ReversePipe {
transform (values) {
if (values) {
return values.reverse();
}
}
}
Plunker
Si alguien está usando mecanografía, aquí es cómo logré que funcionara, 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
}
}
Simplemente puede usar .reverse() 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>
Vea más aquí: https://www.w3schools.com/jsref/jsref_reverse.asp
Uno podría usar ngx-pipes
npm instala ngx-pipes --save
módulo
import {NgPipesModule} from ''ngx-pipes'';
@NgModule({
// ...
imports: [
// ...
NgPipesModule
]
})
componente
@Component({
// ..
providers: [ReversePipe]
})
export class AppComponent {
constructor(private reversePipe: ReversePipe) {
}
}
luego se usa en la plantilla <div *ngFor="let user of users | reverse">
actualizar
@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 por defecto no llamará a la tubería cuando los elementos se agreguen o eliminen de la matriz porque la detección de cambios angulares por defecto solo compara los cambios de la instancia de la matriz.
Para que se llame a la tubería cada vez que se llama la detección de cambios, hice que la tubería fuera impura. Se llamará una tubería impura muy a menudo, por lo tanto, es importante para que funcione de manera eficiente. Crear una copia de una matriz (quizás incluso una matriz grande) y luego revertir su orden es bastante costoso.
Por lo tanto, una diferencia es hacer solo el trabajo real si se reconocieron algunos cambios y, de lo contrario, devolver el resultado almacenado en caché de la llamada anterior.
original
Puede crear una canalización personalizada que devuelva la matriz en el orden inverso o simplemente proporcionar los datos en el orden inverso en primer lugar.
Ver también