Este team de expertos pasados muchos días de trabajo y recopilación de de información, dieron con la solución, nuestro deseo es que te resulte útil en tu plan.
Solución:
Usando track by para rastrear cadenas y valores duplicados
Normalmente ng-repeat realiza un seguimiento de cada elemento por el elemento en sí. por lo dado array objs = [ 'one', 'one', 2, 'five', 'string', 'foo'], ng-repeat intenta rastrear los cambios por cada obj en el ng-repeat="obj in objs". El problema es que tenemos valores duplicados y angular arrojará un error. Una forma de resolver eso es tener un seguimiento angular de los objetos por otros medios. Para cuerdas, track by $index es una buena solución ya que realmente no tiene otros medios para rastrear un string.
track by y activar un resumen y focos de entrada
Aludes al hecho de que eres algo nuevo en angular. Un ciclo de resumen ocurre cuando angular realiza una verificación exhaustiva de cada propiedad observada para reflejar cualquier cambio en la vista correspondiente; a menudo, durante un ciclo de resumen, sucede que su código modifica otras propiedades observadas, por lo que el procedimiento debe realizarse nuevamente hasta que angular no detecte más cambios.
Por ejemplo: hace clic en un botón para actualizar un modelo a través de ng-click, luego hace algunas cosas (es decir, las cosas que escribió en la devolución de llamada para realizar cuando un usuario hace un clic), luego el ciclo de resumen del disparador angular para actualizar la vista. No soy demasiado elocuente al explicar eso, por lo que debería investigar más a fondo si eso no aclaró las cosas.
Así que de vuelta a track by. Usemos un ejemplo:
- llamar a un servicio para devolver un array de objetos
- actualizar un objeto dentro del array y guardar objeto
- después de guardar el servicio, dependiendo de lo que devuelva la API, puede:
- reemplazar todo el objeto O
- actualizar un valor en el objeto existente
- reflejar el cambio en
ng-repeatinterfaz de usuario
La forma en que rastree este objeto determinará cómo la interfaz de usuario refleja el cambio.
Uno de los UX más molestos que he experimentado es este. Digamos que tiene una tabla de objetos, cada celda tiene una entrada en la que desea editar en línea las propiedades de esos objetos. Quiero cambiar el valor, entonces on-blur, guarde ese objeto mientras pasa a la siguiente celda para editar mientras espera la respuesta. Así que esto es una cosa de tipo autoguardado. Dependiendo de cómo configure su track by declaración, puede perder el enfoque actual (por ejemplo, el campo que está editando actualmente) cuando la respuesta se vuelve a escribir en su array de objetos
cuando agregas track by básicamente le dices a angular que genere un solo elemento DOM por objeto de datos en la colección dada.
Puedes track by $index si su fuente de datos tiene identificadores duplicados.
Si necesita repetir los elementos duplicados, puede sustituir el comportamiento de seguimiento predeterminado por el suyo propio mediante la expresión seguimiento por.
Ejemplo:
[id:1,name:'one', id:1,name:'one too', id:2,name:'two']
Trate de usar los valores duplicados en ng-repeatobtendrá un error como:
Error: ngRepeat: duplica la clave duplicada en el repetidor
Para evitar este tipo de problemas debes usar track by $index. Por ejemplo:
-
item
Así es como obtendrías $index en anidado ng-repeat:
outer: $parent.$index inner: $index
Aquí hay algunos recursos que pueden ayudarlo:
track by $indexdocumentaciónngRepeatdocumentación- Artículo de codelord.net de 2014 sobre
ng-repeatrendimiento ytrack by
Deberías usar track by solo si necesita ir en contra del comportamiento predeterminado de ng-repeat que es eliminar elementos duplicados.
Puede rastrear los elementos usando la propiedad de alcance $index o especificando una función personalizada.
Por ejemplo:
x
Mostrar todos los valores de la array (42 se muestra dos veces).
Para referencia: https://docs.angularjs.org/api/ng/directive/ngRepeat
Si piensas que ha resultado provechoso nuestro post, sería de mucha ayuda si lo compartes con otros seniors de esta manera contrubuyes a dar difusión a esta información.