Angular හි ප්‍රතික්‍රියාශීලී ලූප

ngFor ලූපය තුළ ද ප්‍රතික්‍රියාශීලී බව ක්‍රියා කරනු ඇත. මෙහි තේරුම නම්, අරාවේ වෙනස්කම් සිදු වන විට, ඒවා වහාම තිරය මත ප්‍රතිඵල දක්වනු ඇත.

අපි ප්‍රායෝගිකව උත්සාහ කරමු. අපට පහත අරාව ඇතැයි සිතමු:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

ලැයිස්තුවක් ලෙස අපගේ අරාව ලූපයකින් ප්‍රතිදානය කරමු:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

තට්ටු කිරීමෙන් පන්ති ක්‍රමයක් කැඳවනු ලබන බොත්තමක් සාදමු:

app/app.component.html<button (click)="add()">
  add
</button>

මෙම ක්‍රමය තුළ අපගේ අරාව ක්‍රමයකින් වෙනස් කරමු, උදාහරණයක් ලෙස, එයට නව මූලද්‍රව්‍යයක් එකතු කරමු:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

දැන්, කේතය දියත් කර බොත්තම තට්ටු කළහොත්, තට්ටු කිරීමට පසු වහාම ලැයිස්තුව තුළ නව මූලද්‍රව්‍යයක් පෙනී යනු ඇත.