Reaktiiviset silmukat Angularissa
Reaktiivisuus toimii myös silmukassa
ngFor. Tämä tarkoittaa, että taulukon
muutokset näkyvät välittömästi
näytöllä.
Kokeillaan käytännössä. Oletetaan, että meillä on seuraava taulukko:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Esitetään taulukkomme silmukassa listana:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Tehdään painike, jota klikkaamalla kutsutaan luokan metodia:
<button (click)="add()">
add
</button>
Muutetaan taulukkoamme jotenkin tässä metodissa, esimerkiksi lisätään siihen uusi elementti:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Nyt, jos käynnistämme koodin ja painamme painiketta, lista päivittyy välittömästi painalluksen jälkeen.
Annettu taulukko. Esitä sen elementit silmukassa. Tee painike, jota painamalla taulukosta poistetaan viimeinen elementti.
