Для каждого
В LWC for:each — это директива, которая используется с тегом шаблона. Он возвращает элементы из заданных данных. Требуется два параметра. Нам необходимо указать данные в для:each={данные} и for:item='переменная' принимает текущий элемент (из итератора), указанный в переменной. для:index='index_var' хранит индекс элемента, который определяет текущий индекс элемента.
Синтаксис:
Давайте посмотрим, как указать директиву for:each в LWC (HTML-компонент). for:index является необязательным.
<шаблон для:each={данные} для:item= 'item_var' для:индекс= 'index_var' >
Пока вы отображаете значения внутри цикла for:each, вам необходимо указать ключ (это должна быть строка/число, а не объект), который принимает существующую переменную item_var в качестве ключа. Преимущество использования этого ключа заключается в том, чтобы определить, какие элементы добавляются, обновляются и удаляются из данных.
1. Во всех примерах используется файл «meta.xml». Мы не будем указывать это в каждом примере. Компоненты LWC можно добавить на страницу записи, страницу приложения или домашнюю страницу.
'1,0' ?>
<цели>
2. Во всех примерах, которые мы собираемся обсудить в этом руководстве, логика будет представлена в виде кода «js». После этого мы указываем снимок экрана, включающий весь «js»-код.
Пример 1:
Давайте создадим список из 10 субъектов в файле firstComponent.js. Используйте директиву шаблона for:each и перебирайте этот список с помощью итератора «sub». Укажите ключ в качестве этого итератора внутри тега абзаца и отобразите темы.
firstExample.html<шаблон>
<заголовок карты-молнии= «Массив предметов» >
<центр>
<шаблон для:each={subjects_array} для:item= 'суб' для:индекс= 'индекс' >
{sub}
firstExample.js
// Создать массив subject_array, содержащий 10 предметы
subject_array = [ 'АВС' , «Салесфорс» , 'ПХП' , 'Джава' , «Питон» , 'HTML' , 'ДжейСи' , 'Джава' , «Оракул» , 'С#' ];
Весь код:
Выход:
Добавляем этот компонент на страницу «Запись» любого объекта (добавляем на страницу «Запись» аккаунта). Все 10 элементов отображаются в пользовательском интерфейсе.
Пример 2:
Теперь мы создаем массив объектов, который является «id», программы и типа с 10 записями, связанными с субъектами. Они повторяются, чтобы получить программу и тип. Ключом является «id», а значения типа отображаются жирным шрифтом.
второйExample.html<шаблон>
<заголовок карты-молнии= «Массив предметов» >
<центр>
<шаблон для:each={массив_объектов} для:item= 'объект' для:индекс= 'индекс' >
{obj.program} – {obj.type}
второйExample.js
// Создаем array_of_objects, содержащий подробную информацию о 10 предметы
array_of_objects = [{id: 1 , программа: 'АВС' , тип: 'Облако' },{идентификатор: 2 , программа: «Салесфорс» , тип: 'Облако' },
{идентификатор: 3 , программа: 'ПХП' , тип: «Паутина» },{идентификатор: 4 , программа: 'Джава' , тип: «Интернет/Данные» },
{идентификатор: 5 , программа: «Питон» , тип: 'Все' },{идентификатор: 6 , программа: 'HTML' , тип: «Паутина» },
{идентификатор: 7 , программа: 'ДжейСи' , тип: «Паутина» },{идентификатор: 8 , программа: '.СЕТЬ' , тип: «Интернет/Данные» },
{идентификатор: 9 , программа: «Оракул» , тип: 'Данные' },{идентификатор: 10 , программа: 'С#' , тип: 'Данные' }];
Весь код:
Выход:
Вы можете видеть, что все программы отображаются в пользовательском интерфейсе вместе с их типами.
Пример 3:
Создайте вложенный массив объектов (id, программа, тип и темы). Здесь темы снова будут содержать список элементов. В первой директиве шаблона for:each мы перебираем весь вложенный массив. Внутри этого шаблона мы снова перебираем темы, используя предыдущий итератор. Далее мы отображаем программу, тип и темы в основном для каждого шаблона.
третийКомпонент.html<шаблон>
<заголовок карты-молнии= «Массив предметов» >
<центр>
<шаблон для:each={данные} для:item= 'вал' для:индекс= 'индекс' >
<шаблон для:each={val.Topics} для:item= 'val1' >
ПРОГРАММА: {val.program} - {val.type} ТЕМЫ: {val.Topics
третийкомпонент.js
данные = [{id: 1 , программа: 'АВС' , тип: 'Облако' , Темы:[ 'Введение' , «Основы АВК» ]},
{идентификатор: 2 , программа: «Салесфорс» , тип: 'Облако' , Темы:[ 'Админ' , 'Разработка' ]},
{идентификатор: 3 , программа: 'ПХП' , тип: «Паутина» , Темы:[ 'Введение' , «PHP-MySQL» ]}];
Весь код:
Выход:
Все предметы отображаются с указанием их типа и тем. Каждый предмет содержит две темы.
Пример 4:
Давайте переберем записи, которые присутствуют в объекте «Счет». Сначала напишите класс Apex, который возвращает список записей (метод returnAcc()), включающий поля «Идентификатор учетной записи», «Имя», «Отрасль» и «Рейтинг», из объекта «Стандарт учетной записи». В файле «js» мы вызываем метод returnAcc() из Apex (через оператор импорта) внутри linkedcallback(). Это возвращает счета. Наконец, эти учетные записи указываются в директиве шаблона for:each для получения имени учетной записи и отрасли.
АккаунтДата.apxcpublic с общим классом AccountData {
@AuraEnabled(кэшируемый=истина)
общедоступный статический список
List
вернуть список учетных записей;
}
}
FinalComponent.html
<шаблон>
<заголовок карты-молнии= «Показать список учетных записей» >
<класс div= 'slds-var-m-around_medium' >
<шаблон if:true={аккаунты}>
<шаблон для:each={аккаунтов} для:item= 'аккаунт_рек' >
Учетная запись: {account_rec.Name} Отрасль: {account_rec.Industry
