Tengo un escenario bastante específico en el que tengo que almacenar el estado dentro de los componentes del elemento (es decir, dentro de los elementos del lienzo) que se crean a través del bucle ngFor.
En mi componente de lista, tengo una matriz de identificadores de cadena, y necesito crear un elemento de lienzo para cada identificador. Posteriormente, pueden ocurrir algunas manipulaciones con los datos del lienzo, por lo que si se recrean los elementos del lienzo, se perderán los datos de píxeles.
Sin embargo, a veces el orden de los identificadores de cadena puede cambiar y, por lo tanto, también me gustaría cambiar el orden en el que ngFor representa esos elementos del lienzo. Sin realmente eliminarlos y crear de nuevo.
Lo sé, este escenario puede sonar extraño y hay otras formas de manejar lo que quiero, pero en este momento solo estoy interesado si esto sería posible en Angular2/4.
Puede administrar el objeto con un @Pipe , simplemente agregue la tubería a su código, ejemplo:
*ngFor="let field of formFields | keys"
Donde keys es un @Pipe.
Consulte este tutorial para crear un @Pipe personalizado: https://scotch.io/tutorials/create-a-globally-available-custom-pipe-in-angular-2
Como no publicó ningún código, asumo que tiene lista la funcionalidad de "cambiar el orden de los elementos dentro del objeto".
Entonces, podrías construir tu @Pipe así:
@Pipe({name: 'alterOrder'}) export class AlterOrderPipe implements PipeTransform { transform(value, args: string[]): any { let myArray = []; for (let elem in value) { if (!isNullOrUndefined(elem)) { // Alter order functionality myArray.push(alteredOrderObj); // alteredOrderObj would be the result of your functionality } } return myArray; } }Y en tu código, lo usas así:
*ngFor="let elem of myArray | alterOrder"
¿Parece que desea reordenar visualmente los elementos pero no volver a renderizarlos correctamente? Creo que si no quieres volver a renderizar los elementos pero quieres que se presenten en un orden visual diferente, entonces tu mejor apuesta es CSS. Tal vez use angular para calcular el posicionamiento y luego use el posicionamiento CSS.