Angularda Reaktiv Tsikllar
Reaktivlik tsikl
ngFor ichida ham ishlaydi. Bu shuni anglatadiki,
massiv o'zgarganda, bu o'zgarishlar darhol ekranda
aks etadi.
Keling, amalda sinab ko'raylik. Faraz qilaylik, bizda quyidagi massiv mavjud:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Keling, massivimizni tsiklda ro'yxat shaklida chiqaraylik:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
Keling, bosilganda klass metodini chaqiradigan tugma yarataylik:
<button (click)="add()">
add
</button>
Ushbu metodda massivimizni o'zgartiramiz, masalan, unga yangi element qo'shamiz:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Endi, agar kodni ishga tushirsak va tugmani bossek, bosish bilan birgalikda ro'yxatda yangi element paydo bo'ladi.
Massiv berilgan. Uning elementlarini tsiklda chiqaring. Bosilganda massivdan oxirgi element o'chadigan tugma yarating.
