Para cada
En LWC, for:each es una directiva que se utiliza con la etiqueta de plantilla. Devuelve los elementos de los datos dados. Se necesitan dos parámetros. Tenemos que especificar los datos en el para:cada uno={datos} y para: elemento = 'variable' toma el elemento actual (del iterador) que se especifica con una variable. El para:índice=”index_var” almacena el índice del elemento que especifica el índice del elemento actual.
Sintaxis:
Veamos cómo especificar la directiva for:each en el LWC (componente HTML). El índice for: es opcional.
'1.0' ?>
2. En todos los ejemplos que vamos a analizar en esta guía, la lógica se proporcionará como código 'js'. Después de eso, especificamos la captura de pantalla que incluye el código 'js' completo.
Ejemplo 1:
Creemos una lista que contenga 10 temas en el archivo 'firstComponent.js'. Utilice la directiva de plantilla for:each e itere esta lista con el iterador 'sub'. Especifique la clave como este iterador dentro de la etiqueta de párrafo y muestre los temas.
primerEjemplo.html{sub}
primerEjemplo.js
// Crea una matriz de sujetos que contiene 10 asignaturas
matriz_sujetos = [ 'AWS' , 'Fuerza de ventas' , 'php' , 'Java' , 'Pitón' , 'HTML' , 'JS' , 'Java' , 'Oráculo' , 'C#' ];
Código completo:
Producción:
Agregue este componente a la página 'Registro' de cualquier objeto (lo agregamos a la página 'Registro' de la cuenta). Los 10 elementos se muestran en la interfaz de usuario.
Ejemplo 2:
Ahora, creamos una matriz de objetos que es 'id', el programa, y escribimos con 10 registros relacionados con los Temas. Estos se repiten para obtener el programa y el tipo. La clave es la 'id' y los valores de tipo se muestran en negrita.
segundoEjemplo.html{obj.programa} - {obj.tipo}
segundoEjemplo.js
// Crea una matriz_de_objetos que contiene detalles de 10 asignaturas
matriz_de_objetos = [{id: 1 ,programa: 'AWS' , tipo: 'Nube' },{identificación: 2 ,programa: 'Fuerza de ventas' , tipo: 'Nube' },
{identificación: 3 ,programa: 'php' , tipo: 'Web' },{identificación: 4 ,programa: 'Java' , tipo: 'Web/Datos' },
{identificación: 5 ,programa: 'Pitón' , tipo: 'Todo' },{identificación: 6 ,programa: 'HTML' , tipo: 'Web' },
{identificación: 7 ,programa: 'JS' , tipo: 'Web' },{identificación: 8 ,programa: '.NETO' , tipo: 'Web/Datos' },
{identificación: 9 ,programa: 'Oráculo' , tipo: 'Datos' },{identificación: 10 ,programa: 'C#' , tipo: 'Datos' }];
Código completo:
Producción:
Puede ver que todos los programas se muestran en la interfaz de usuario junto con sus tipos.
Ejemplo 3:
Cree una matriz anidada de objetos (id, programa, tipo y temas). Aquí, los temas volverán a contener una lista de elementos. En la primera directiva de plantilla for:each, iteramos toda la matriz anidada. Dentro de esta plantilla, volvemos a iterar los temas utilizando el iterador anterior. A continuación, mostramos el programa, tipo y temas en el menú principal de:cada plantilla.
tercerComponente.htmlPROGRAMA: {val.program} - {val.type} TEMAS: {val.Temas}
tercerComponent.js
datos = [{id: 1 ,programa: 'AWS' , tipo: 'Nube' , Temas:[ 'Introducción' , 'Esenciales del AWC' ]},
{identificación: 2 ,programa: 'Fuerza de ventas' , tipo: 'Nube' , Temas:[ 'Administración' , 'Desarrollo' ]},
{identificación: 3 ,programa: 'php' , tipo: 'Web' , Temas:[ 'Introducción' , 'PHP-MySQL' ]}];
Código completo:
Producción:
Todos los temas se muestran con su tipo y temas. Cada tema tiene dos temas.
Ejemplo 4:
Repitamos los registros que están presentes en el objeto 'Cuenta'. Primero, escriba una clase de Apex que devuelva la lista de registros (método returnAcc()) que incluyen los campos ID de cuenta, Nombre, Industria y Calificación del objeto Estándar de cuenta. En el archivo “js”, invocamos el método returnAcc() desde Apex (a través de la declaración de importación) dentro de connectcallback(). Esto devuelve las cuentas. Finalmente, estas cuentas se especifican en la directiva de plantilla for:each para obtener el nombre de la cuenta y la industria.
Datos de cuenta.apxcpúblico con clase compartida AccountData {
@AuraEnabled(cachéable=verdadero)
Lista estática pública
Lista
devolver lista de cuentas;
}
}
componente final.html
Cuenta: {account_rec.Name} Industria: {account_rec.Industry}
