こんにちは、アンダーソンです。
今回はiteratorを使った反復処理を試してみようと思います。
以前にfor:eachを使った反復処理を書いたんですが
公式のドキュメントをみていると、iteratorという方法でも反復処理ができる
ようなので実際に試してみました。
iteratorを使った反復処理
import { LightningElement } from 'lwc';
export default class SelectorTest extends LightningElement {
values = [
{
Id: 1,
name: '藤浪',
age: 26
},
{
Id: 2,
name: '青柳',
age: 26
},
{
Id: 3,
name: '西',
age: 29
},
{
Id: 4,
name: '秋山',
age: 29
}
];
}今回上記のような配列を用意しました。
でHTMLの方は下記のようにしました。
<template>
<lightning-card>
<ul class="slds-var-m-around_medium">
<template iterator:item={values}>
<li key={item.value.Id}>
{item.value.name}選手は{item.value.age}歳です。
</li>
</template>
</ul>
</lightning-card>
</template>これで下記のように表示されます。
iterator:〇〇のところにくる名前がループ内での変数名になりますので、
今回の場合、itemという名前でループを回すことになります。
ループ中のプロパティにアクセスする
次にfor:eachではできないプロパティにアクセスしてみます。
iteratorでは下記のプロパティにアクセスできます。
- value
- index
- first →Boolean
- last →Boolean
for:eachとは違い、インデックスと最初の要素、最後の要素をとることができます。
ではやってみましょう。
<template>
<lightning-card>
<ul class="slds-var-m-around_medium">
<template iterator:item={values}>
<li key={item.value.Id}>
<div if:true={item.first}>一番目</div>
{item.index}:{it.value.name}選手は{it.value.age}歳です。
<div if:true={item.last}>最後</div>
</li>
</template>
</ul>
</lightning-card>
</template>firstとlastは真偽値の為、ifで判定することができます。
上記の場合だとこのようになります。
ここでは、最初と最後のdivに対して一番目と最後と入れてますが、
クラスを指定してCSSで装飾なんてこともできます。
まとめ
最初と最後というのが意図的に取得できるiteratorでの
ループはまた違った見せ方ができる手法になると思います。
しっかりマスターしておきたいところですね。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
