Директива for дар Angular

Бигзор мо массиве дошта бошем:

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

Биёед ин массивро бо цикл дар файли template такрор кунем. Барои ин директиваи *ngFor пешбинӣ шудааст. Он метавонад массивро такрор карда ва ҳар элементро дар теги ҷудогона чоп кунад.

Аввалан ин директиваро бояд ворид кард:

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

Ва онро ба бахши воридот дар декоратор илова кунед:

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

Ҳоло аз он метавон истифода бурд. Биёед бубинем, ки ин чӣ тавр анҷом дода мешавад. Бигзор мо феҳристи ul дошта бошем:

<ul>
	
</ul>

Биёед тавре созем, ки массиви мо дар цикл такрор шавад ва ҳар як элемент он дар тегҳои li чоп шавад. Ин ба тариқи зерин анҷом дода мешавад:

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

Массив дода шудааст:

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

Ҳар як элементи ин массивро дар абзаси ҷудогона чоп кунед.

Масъалаи қаблиро тавре тағир диҳед, ки дар абзасҳо квадратҳои элементҳои массиви мо чоп шаванд.