
Codice html
<template>
<lightning-card title="HelloForEach" icon-name="action:goal">
<ul class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">
<li key={contact.Id}>
{contact.Name}, {contact.Title}
</li>
</template>
</ul>
<c-view-source source="lwc/helloForEach" slot="footer">
Il file css deve avere lo stesso nome del file html e js a differenza dell'estensione
</c-view-source>
</lightning-card>
</template>
Controller
// le prime due righe si ripetono quasi identiche per ogni componente
import { LightningElement } from 'lwc';
export default class HelloForEach extends LightningElement {
// oggetto con i dati
contacts = [
{
Id: '003171931112854375',
Name: 'Amy Taylor',
Title: 'VP of Engineering',
},
{
Id: '003192301009134555',
Name: 'Michael Jones',
Title: 'VP of Sales',
},
{
Id: '003848991274589432',
Name: 'Jennifer Wu',
Title: 'CEO',
},
];
}