フォーリーチ
LWC では、for:each は template タグとともに使用されるディレクティブです。指定されたデータから項目を返します。 2 つのパラメータを取ります。データを指定する必要があります for:each={データ} そして for:item=”変数” 変数で指定された現在の項目を (反復子から) 取得します。の for:index=”index_var” 現在の要素インデックスを指定する要素インデックスを格納します。
構文：
LWC (HTML コンポーネント) で for:each ディレクティブを指定する方法を見てみましょう。 for:index はオプションです。
「アイテム変数」 for:インデックス= 「インデックス_場所」 >
「1.0」 ?>
<ターゲット>
2. このガイドで説明するすべての例では、ロジックは「js」コードとして提供されます。その後、「js」コード全体を含むスクリーンショットを指定します。
例 1:
「firstComponent.js」ファイルに 10 件の件名を保持するリストを作成しましょう。 for:each テンプレート ディレクティブを使用し、このリストを「sub」イテレータで繰り返します。段落タグ内にこのイテレータとしてキーを指定し、件名を表示します。
最初の例.html<テンプレート>
<稲妻カードのタイトル= 「主題の配列」 >
<中央>
'サブ' for:インデックス= '索引' >
{sub}
最初の例.js
// を保持する subject_array を作成します 10 科目
subject_array = [ 「AWS」 、 「セールスフォース」 、 「PHP」 、 「ジャワ」 、 「パイソン」 、 「HTML」 、 「JS」 、 「ジャワ」 、 「オラクル」 、 「C#」 ];
コード全体:
出力：
このコンポーネントを任意のオブジェクトの「レコード」ページに追加します (アカウントの「レコード」ページに追加します)。 10 個の要素すべてが UI に表示されます。
例 2:
ここで、「id」、プログラム、およびサブジェクトに関連する 10 個のレコードを含むタイプのオブジェクトの配列を作成します。これらはプログラムと型を取得するために反復されます。キーは「id」で、タイプ値は太字で表示されます。
2 番目の例.html<テンプレート>
<稲妻カードのタイトル= 「主題の配列」 >
<中央>
「オブジェクト」 for:インデックス= '索引' >
{obj.program} - {obj.type}
2番目の例.js
// 詳細を保持する array_of_objects を作成します 10 科目
オブジェクトの配列 = [{id: 1 、プログラム： 「AWS」 、 タイプ： '雲' },{id: 2 、プログラム： 「セールスフォース」 、 タイプ： '雲' }、
{ID: 3 、プログラム： 「PHP」 、 タイプ： 'ウェブ' },{id: 4 、プログラム： 「ジャワ」 、 タイプ： 「ウェブ・データ」 }、
{ID: 5 、プログラム： 「パイソン」 、 タイプ： '全て' },{id: 6 、プログラム： 「HTML」 、 タイプ： 'ウェブ' }、
{ID: 7 、プログラム： 「JS」 、 タイプ： 'ウェブ' },{id: 8 、プログラム： '。ネット' 、 タイプ： 「ウェブ・データ」 }、
{ID: 9 、プログラム： 「オラクル」 、 タイプ： 'データ' },{id: 10 、プログラム： 「C#」 、 タイプ： 'データ' }];
コード全体:
出力：
すべてのプログラムがその種類とともに UI に表示されていることがわかります。
例 3:
オブジェクト (ID、プログラム、タイプ、トピック) のネストされた配列を作成します。ここでも、トピックには要素のリストが保持されます。最初の for:each テンプレート ディレクティブでは、ネストされた配列全体を繰り返します。このテンプレート内では、前のイテレータを使用してトピックを再度繰り返します。次に、メインの for:each テンプレートにプログラム、タイプ、トピックを表示します。
サードコンポーネント.html<テンプレート>
<稲妻カードのタイトル= 「主題の配列」 >
<中央>
「ヴァル」 for:インデックス= '索引' >
「val1」 >
プログラム: {val.program} - {val.type} トピック: {val.トピック}
サードコンポーネント.js
データ = [{id: 1 、プログラム： 「AWS」 、 タイプ： '雲' 、 トピック：[ '導入' 、 「AWCの必需品」 ]}、
{ID: 2 、プログラム： 「セールスフォース」 、 タイプ： '雲' 、 トピック：[ 「管理者」 、 '発達' ]}、
{ID: 3 、プログラム： 「PHP」 、 タイプ： 'ウェブ' 、 トピック：[ '導入' 、 「PHP-MySQL」 ]}];
コード全体:
出力：
すべての主題がその種類とトピックとともに表示されます。各主題には 2 つのトピックがあります。
例 4:
「Account」オブジェクトに存在するレコードを繰り返してみましょう。まず、Account Standard オブジェクトの Account ID、Name、Industry、Rating 項目を含むレコードのリスト (returnAcc() – メソッド) を返す Apex クラスを作成します。 「js」ファイルでは、connectedcallback() 内で Apex から returnAcc() メソッドを (import ステートメント経由で) 呼び出します。これによりアカウントが返されます。最後に、これらのアカウントを for:each テンプレート ディレクティブで指定して、アカウント名と業種を取得します。
アカウントデータ.apxcpublic と共有クラス AccountData {
@AuraEnabled(キャッシュ可能=true)
public static List<アカウント> returnAcc(){
List
アカウントリストを返します。
}
}
最終コンポーネント.html
<テンプレート>
<稲妻カードのタイトル= 「アカウントの一覧を表示」 >
<テンプレート if:true={アカウント}>
「アカウント_rec」 >
アカウント: {account_rec.Name} 業界: {account_rec.Industry}
最終コンポーネント.js
import { LightningElement,track } から '運' ;
returnAcc をインポートする 「@salesforce/apex/AccountData.returnAcc」 ;
デフォルトクラスをエクスポート FinalComponent extends LightningElement {
@トラックアカウント;
@track エラー;
ConnectedCallback(){
returnAcc()
// アカウントを返します
.then(結果 => {
this.accounts = 結果;
this.error = 未定義;
})
.catch(エラー => {
this.error = エラー;
this.accounts = 未定義;
});
}
}
出力：
[名前] フィールドと [業界] フィールドには 10 個のアカウントのみが表示されます。
結論
指定されたデータから項目を返すために使用される for:each テンプレート ディレクティブについて説明しました。リスト、オブジェクトの配列、ネストされたオブジェクト、Salesforce オブジェクトを含む 4 つの異なる例が提供されています。データは「js」ファイルから取得し、それを for:each テンプレートで使用する必要があります。最後のサンプルコンポーネントをデプロイするときに、最初に Apex クラスをデプロイする必要があることを確認してください。