Reaktívne cykly v Angular
Reaktivita bude fungovať aj v cykle
ngFor. To znamená, že pri zmenách
pola sa tieto zmeny okamžite prejavia
na obrazovke.
Vyskúšajme si to v praxi. Nech máme nasledujúce pole:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Vypíšme naše pole v cykle vo forme zoznamu:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Vytvorme tlačidlo, po kliknutí na ktoré bude volaná metóda triedy:
<button (click)="add()">
add
</button>
V tejto metóde nejako zmeňme naše pole, napríklad, pridajme do neho nový prvok:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Teraz, ak spustíme kód a stlačíme tlačidlo, tak ihneď po stlačení v zozname sa objaví nový prvok.
Dané pole. Vypíšte jeho prvky v cykle. Vytvorte tlačidlo, po stlačení ktorého z pola bude odstránený posledný prvok.
