Direktivet for i Angular

La oss si vi har en array:

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

La oss iterere over denne arrayen med en løkke i mal-filen. For dette formålet er det strukturelle direktivet *ngFor beregnet. Den kan iterere over en array og vise hvert element i en egen tag.

Først må dette direktivet importeres:

import {NgFor} from "@angular/common";

Og legges til i imports-seksjonen i dekoratøren:

@Component({
	.....
	imports: [....., NgFor],
	....
})

Nå kan det brukes. La oss se hvordan det gjøres. La oss si vi har en liste ul:

<ul>
	
</ul>

La oss gjøre slik at arrayen vår itereres i en løkke og hvert element vises i tags li. Dette gjøres på følgende måte:

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

Gitt arrayen:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Vis hvert element i denne arrayen i et eget avsnitt.

Modifiser den forrige oppgaven slik at kvadratene av elementene i arrayen vår vises i avsnittene.