Reaktiivsed tsüklid Angularis
Reaktiivsus töötab ka tsüklis
ngFor. See tähendab, et massiivi muutuste
korral kajastuvad need muutused kohe
ekraanil.
Proovime seda praktikas. Olgu meil järgmine massiiv:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Kuvame oma massiivi tsüklina loendina:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Loome nupu, millel klikkides kutsutakse klassi meetod:
<button (click)="add()">
add
</button>
Selles meetodis muudame oma massiivi mingil moel, näiteks lisame sellele uue elemendi:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Nüüd, kui käivitada kood ja vajutada nuppu, ilmub peale vajutamist kohe loendisse uus element.
Antud on massiiv. Kuva selle elemendid tsüklina. Tee nupp, millel vajutades eemaldatakse massiivist viimane element.
