LWC For:각 지시어

각각

LWC에서 for:each는 템플릿 태그와 함께 사용되는 지시어입니다. 주어진 데이터에서 항목을 반환합니다. 두 개의 매개변수가 필요합니다. 우리는 for:각={데이터} 그리고 for:item='변수' 변수로 지정된 현재 항목(반복자에서)을 가져옵니다. 그만큼 for:index=”index_var” 현재 요소 인덱스를 지정하는 요소 인덱스를 저장합니다.

통사론:

LWC(HTML 구성 요소)에서 for:each 지시어를 지정하는 방법을 살펴보겠습니다. for:index는 선택사항입니다.

2. 이 가이드에서 논의할 모든 예제에서는 로직이 'js' 코드로 제공됩니다. 그런 다음 전체 'js' 코드가 포함된 스크린샷을 지정합니다.

예시 1:

“firstComponent.js” 파일에 10개의 주제를 포함하는 목록을 만들어 보겠습니다. for:each 템플릿 지시문을 사용하고 'sub' 반복자로 이 목록을 반복합니다. 단락 태그 내에서 이 반복자로 키를 지정하고 제목을 표시합니다.

{sub}

전체 코드:

산출:

이 구성 요소를 개체의 '기록' 페이지에 추가합니다(계정 '기록' 페이지에 추가합니다). 10개의 요소가 모두 UI에 표시됩니다.

예 2:

이제 프로그램인 'id'라는 개체 배열을 만들고 주제와 관련된 10개의 레코드를 입력합니다. 이는 프로그램과 유형을 얻기 위해 반복됩니다. 키는 'id'이고 유형 값은 굵게 표시됩니다.

{obj.program} - {obj.type}

전체 코드:

산출:

모든 프로그램이 해당 유형과 함께 UI에 표시되는 것을 볼 수 있습니다.

예시 3:

객체(id, 프로그램, 유형, 주제)의 중첩된 배열을 만듭니다. 여기서 항목은 다시 요소 목록을 보유합니다. 첫 번째 for:each 템플릿 지시문에서는 전체 중첩 배열을 반복합니다. 이 템플릿 내에서는 이전 반복자를 사용하여 주제를 다시 반복합니다. 다음으로 기본 for:each 템플릿에 프로그램, 유형, 주제를 표시합니다.

프로그램:  {val.program}   - {val.type} 주제:   {val.Topics}

전체 코드:

산출:

모든 주제는 유형 및 주제와 함께 표시됩니다. 각 주제에는 두 가지 주제가 있습니다.

예시 4:

'계정' 개체에 있는 레코드를 반복해 보겠습니다. 먼저 계정 표준 개체의 계정 ID, 이름, 산업 및 등급 필드를 포함하는 레코드 목록(returnAcc() – 메서드)을 반환하는 Apex 클래스를 작성합니다. 'js' 파일에서는 linkedcallback() 내부의 Apex(import 문을 통해)에서 returnAcc() 메서드를 호출합니다. 그러면 계정이 반환됩니다. 마지막으로 이러한 계정은 for:each 템플릿 지시문에 지정되어 계정 이름과 산업을 가져옵니다.