Direktyva for Angular

Tarkime, kad turime masyvą:

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

Perkelkime šį masyvą ciklu šablono faile. Tam skirta direktyva *ngFor. Ji gali pakelti masyvą ir išvesti kiekvieną jo elementą atskiroje žymoje.

Pirmiausia ši direktyva turi būti importuota:

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

Ir pridėkite ją į importų skiltį dekoratoriuje:

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

Dabar galite ja naudotis. Pažiūrėkime, kaip tai daroma. Tarkime, kad turime sąrašą ul:

<ul>
	
</ul>

Padarykime taip, kad mūsų masyvas būtų pakeltas cikle ir kiekvienas jo elementas būtų išvestas žymėse li. Tai daroma taip:

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

Duotas masyvas:

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

Išveskite kiekvieną šio masyvo elementą atskiroje pastraipoje.

Modifikuokite ankstesnę užduotį taip, kad pastraipose būtų išvesti mūsų masyvo elementų kvadratai.