Direktiva for v Angular
Mějme pole:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
Pojďme toto pole projít cyklem v
souboru templatu. K tomu je určena
directiva *ngFor. Umí projít
pole a vypsat každý jeho prvek v
samostatném tagu.
Nejprve je třeba tuto direktivu importovat:
import {NgFor} from "@angular/common";
A přidat ji do sekce imports v dekorátoru:
@Component({
.....
imports: [....., NgFor],
....
})
Nyní ji lze používat. Podívejme se,
jak se to dělá. Mějme seznam ul:
<ul>
</ul>
Udělejme to, aby naše pole bylo procházeno
cyklem a každý jeho prvek byl vypsán v
tagů li. To se dělá následujícím
způsobem:
<ul>
<li *ngFor="let el of arr">
{{ el }}
</li>
</ul>
Dané pole:
export class AppComponent {
public arr: number[] = [1, 2, 3, 4, 5];
}
Vypište každý prvek tohoto pole v samostatném odstavci.
Upravte předchozí úlohu tak, aby v odstavcích byly vypsány čtverce prvků našeho pole.
