Reaktiewe siklusse in Angular

Reaktiwiteit sal ook werk in 'n ngFor-siklus. Dit beteken dat veranderings aan die skikking onmiddellik op die skerm sal verskyn.

Kom ons probeer dit in die praktyk. Laat ons sê ons het die volgende skikking:

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

Laat ons ons skikking in 'n siklus as 'n lys toon:

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

Kom ons maak 'n knoppie wat, wanneer daarop geklik word, 'n metode in die klas sal aanroep:

<button (click)="add()">
	add
</button>

In hierdie metode sal ons ons skikking op een of ander manier verander, bv., ons voeg 'n nuwe element by:

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

As jy nou die kode uitvoer en op die knoppie druk, sal 'n nuwe element onmiddellik in die lys verskyn.

Gegewe 'n skikking. Vertoon sy elemente in 'n siklus. Maak 'n knoppie wat, wanneer dit gedruk word, die laaste element uit die skikking sal verwyder.