Angular හි for නිර්දේශය
අපට අරාවක් ඇතැයි සිතමු:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
අපි මෙම අරාව template ගොනුවක පුංචිකමකින් පුනරාවර්තනය කරමු. මේ සඳහා *ngFor නිර්දේශය නිර්මාණය කර ඇත. එයට අරාවක් පුනරාවර්තනය කර එහි සෑම මූලද්රව්යයක්ම වෙනම ටැගයකින් ප්රතිදානය කළ හැකිය.
පළමුවෙන්ම මෙම නිර්දේශය ආයාත කළ යුතුය:
import {NgFor} from "@angular/common";
සහ decorator හි ආයාත කොටසට එය එක් කරන්න:
@Component({
.....
imports: [....., NgFor],
....
})
දැන් එය භාවිතා කළ හැකිය. එය කරන ආකාරය බලමු. අපට ul ලැයිස්තුවක් ඇතැයි සිතමු:
<ul>
</ul>
අපගේ අරාව පුංචිකමකින් පුනරාවර්තනය වී එහි සෑම මූලද්රව්යයක්ම li ටැග තුළ ප්රතිදානය වන පරිදි කරමු. මෙය පහත පරිදි සිදු කෙරේ:
<ul>
<li *ngFor="let el of arr">
{{ el }}
</li>
</ul>
අරාවක් දී ඇත:
export class AppComponent {
public arr: number[] = [1, 2, 3, 4, 5];
}
මෙම අරාවේ සෑම මූලද්රව්යයක්ම වෙනම ඡේදයක ප්රතිදානය කරන්න.
පෙර කාර්යය වෙනස් කරන්න, එවිට අපගේ අරාවේ මූලද්රව්යවල වර්ග ඡේදවල ප්රතිදානය වේ.
