Αντιδραστικοί Βρόχοι στο 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('!');
	}
}

Τώρα, αν εκτελέσουμε τον κώδικα και πατήσουμε το κουμπί, αμέσως μετά το πάτημα θα εμφανιστεί ένα νέο στοιχείο στη λίστα.

Δίνεται ένας πίνακας. Εμφανίστε τα στοιχεία του σε έναν βρόχο. Δημιουργήστε ένα κουμπί που, όταν πατηθεί, το τελευταίο στοιχείο θα αφαιρείται από τον πίνακα.