Angular හි ප්රතික්රියාශීලී ලූප
ngFor ලූපය තුළ ද ප්රතික්රියාශීලී බව ක්රියා කරනු ඇත.
මෙහි තේරුම නම්, අරාවේ වෙනස්කම් සිදු වන විට,
ඒවා වහාම තිරය මත ප්රතිඵල දක්වනු ඇත.
අපි ප්රායෝගිකව උත්සාහ කරමු. අපට පහත අරාව ඇතැයි සිතමු:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
ලැයිස්තුවක් ලෙස අපගේ අරාව ලූපයකින් ප්රතිදානය කරමු:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
තට්ටු කිරීමෙන් පන්ති ක්රමයක් කැඳවනු ලබන බොත්තමක් සාදමු:
<button (click)="add()">
add
</button>
මෙම ක්රමය තුළ අපගේ අරාව ක්රමයකින් වෙනස් කරමු, උදාහරණයක් ලෙස, එයට නව මූලද්රව්යයක් එකතු කරමු:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
දැන්, කේතය දියත් කර බොත්තම තට්ටු කළහොත්, තට්ටු කිරීමට පසු වහාම ලැයිස්තුව තුළ නව මූලද්රව්යයක් පෙනී යනු ඇත.
අරාවක් ලබා දී ඇත. එහි මූලද්රව්ය ලූපයකින් ප්රතිදානය කරන්න. තට්ටු කිරීමෙන් අරාවෙන් අවසාන මූලද්රව්යය ඉවත් වන බොත්තමක් සාදන්න.
