რეაქტიული ციკლები Angular-ში

რეაქტიულობა ასევე იმუშავებს ციკლში ngFor. ეს ნიშნავს, რომ მასივში ცვლილებების შემთხვევაში, ეს ცვლილებები დაუყოვნებლივ აისახება ეკრანზე.

შევეცადოთ პრაქტიკაში. დავუშვათ, გვაქვს შემდეგი მასივი:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

გამოვსახოთ ჩვენი მასივი ციკლში სიის სახით:

<ul>
	<li *ngFor="let elem of arr">
		{{ elem }}
	</li>
</ul>

შევქმნათ ღილაკი, რომლის დაწკაპუნებაც გამოიძახებს კლასის მეთოდს:

<button (click)="add()">
	დამატება
</button>

ამ მეთოდში როგორმე შევცვალოთ ჩვენი მასივი, მაგალითად, დავამატოთ მას ახალი ელემენტი:

export class AppComponent {
	public text: string = '';
	
	public add(): void {
		this.arr.push('!');
	}
}

ახლა, თუ გავუშვებთ კოდს და დავაწკაპუნებთ ღილაკს, მაშინვე დაწკაპუნების შემდეგ სიაში გამოჩნდება ახალი ელემენტი.

მოცემულია მასივი. გამოიტანეთ მისი ელემენტები ციკლში. შექმენით ღილაკი, რომლის დაჭერით მასივიდან წაიშლება ბოლო ელემენტი.