Angular හි for ගොඩනැගිල්ල
අරාවේ මූලද්රව්ය හරහා ලූපයක් ද @for ගොඩනැගිල්ල භාවිතයෙන් ද ආරම්භ කළ හැකිය.
ප්රායෝගිකව උත්සාහ කරමු. අපගේ කොම්පෝනන්ටයෙහි නැවතත් අරාවක් ඇතැයි සිතමු:
export class AppComponent {
public arr: number[] = [1, 2, 3, 4, 5];
}
ගොඩනැගිල්ලේ වාක්ය ඛණ්ඩය සලකා බලමු:
@for () {
ටැග
}
පුනරාවර්තනය කරන අරාව සහ මූලද්රව්ය ලබා ගන්නා විචල්යය නම් කරමු:
@for (elem of arr) {
ටැග
}
කෙසේ වෙතත්, මෙය තවමත් සියල්ල නොවේ. Angular නිවැරදිව ක්රියා කිරීම සඳහා අපි විශේෂ track විධානය නම් කළ යුතුය. එයට පසුව, අරාවේ සෑම මූලද්රව්යයක් සඳහාම අද්විතීය අගයක් නම් කළ යුතුය. Angular DOM සමඟ වඩාත් ප්රශස්තව වැඩ කිරීමට හැකි වන පරිදි මෙය අවශ්ය වේ. එවැනි අද්විතීය අගයක් ලෙස අරා මූලද්රව්යයේ අංකය ගනිමු. මේ සඳහා අපි $index විචල්යය නම් කළ යුතුය. එබැවින්, අපගේ අවසාන කේතය මෙයයි:
@for (elem of arr; track $index) {
<div>
{{ elem }}
</div>
}
අරාව ලබා දී ඇත:
export class AppComponent {
public arr: numbers[] = [1, 2, 3, 4, 5];
}
මෙම අරාවේ සෑම මූලද්රව්යයක්ම වෙනම ඡේදයක් තුළ ප්රදර්ශනය කරන්න.
