Reaktivni ciklusi u Angularu
Reaktivnost će takođe raditi u ciklusu
ngFor. Ovo znači da će se promene u
nizu odmah prikazati na ekranu.
Hajde da isprobamo u praksi. Neka imamo sledeći niz:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Ispisaćemo naš niz u ciklusu kao listu:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Napravićemo dugme, čijim klikom će se pozivati metoda klase:
<button (click)="add()">
add
</button>
U ovoj metodi ćemo nekako izmeniti naš niz, na primer, dodati mu novi element:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Sada, ako pokrenemo kod i pritisnemo dugme, onda će se odmah nakon klika u listi pojaviti novi element.
Dat je niz. Prikažite njegove elemente u ciklusu. Napravite dugme, čijim pritiskom će se iz niza brisati poslednji element.