Անգուլարում ռեակտիվ ցիկլերը

Ռեակտիվությունը նաև կաշխատի 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('!');
  }
}

Այժմ, եթե գործարկենք կոդը և սեղմենք կոճակը, ապա սեղմումից անմիջապես հետո ցուցակում կհայտնվի նոր տարր: