Angular 2
Hoekig - ForLoop
Zoeken…
Syntaxis
- <div * ngFor = "item laten; items i = index"> {{i}} {{item}} </ div>
Opmerkingen
De *ngFor structurele richtlijn loopt als een lus in een verzameling en herhaalt een stukje html voor elk element van een verzameling.
@View decorator is nu verouderd. Ontwikkelaars moeten template of 'templateUrl'-eigenschappen gebruiken voor @Component decorator.
Hoek 2 voor lus
Voor live plnkr klik ...
<!doctype html>
<html>
<head>
<title>ng for loop in angular 2 with ES5.</title>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
<script>
var ngForLoop = function () {
this.msg = "ng for loop in angular 2 with ES5.";
this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena'];
};
ngForLoop.annotations = [
new angular.Component({
selector: 'ngforloop'
}),
new angular.View({
template: '<H1>{{msg}}</H1>' +
'<p> User List : </p>' +
'<ul>' +
'<li *ng-for="let user of users">' +
'{{user}}' +
'</li>' +
'</ul>',
directives: [angular.NgFor]
})
];
document.addEventListener("DOMContentLoaded", function () {
angular.bootstrap(ngForLoop);
});
</script>
</head>
<body>
<ngforloop></ngforloop>
<h2>
<a href="http://www.code-sample.com/" target="_blank">For more detail...</a>
</h2>
</body>
</html>
NgFor - Markup For Loop
De NgFor- richtlijn instantieert een sjabloon eenmaal per item uit een iterabel. De context voor elk geïmmuniseerd sjabloon neemt over van de buitenste context met de gegeven lusvariabele ingesteld op het huidige item uit de iterabele.
Om het standaard tracking-algoritme aan te passen, ondersteunt NgFor de optie trackBy . trackBy neemt een functie die twee argumenten heeft: index en item. Als trackBy wordt gegeven, verandert hoekige tracks met de retourwaarde van de functie.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Aanvullende opties : NgFor biedt verschillende geëxporteerde waarden die kunnen worden gekoppeld aan lokale variabelen:
- index wordt ingesteld op de huidige lus-iteratie voor elke sjablooncontext.
- first wordt ingesteld op een Booleaanse waarde die aangeeft of het item het eerste in de iteratie is.
- last wordt ingesteld op een booleaanse waarde die aangeeft of het item het laatste in de iteratie is.
- even wordt ingesteld op een booleaanse waarde die aangeeft of dit item een even index heeft.
- oneven wordt ingesteld op een Booleaanse waarde die aangeeft of dit item een oneven index heeft.
* ngFor in de tabelrijen
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ng Voor met component
@Component({
selector: 'main-component',
template: '<example-component
*ngFor="let hero of heroes"
[hero]="hero"></example-component>'
})
@Component({
selector: 'example-component',
template: '<div>{{hero?.name}}</div>'
})
export class ExampleComponent {
@Input() hero : Hero = null;
}
* ngVoor X aantal items per rij
Voorbeeld toont 5 items per rij:
<div *ngFor="let item of items; let i = index">
<div *ngIf="i % 5 == 0" class="row">
{{ item }}
<div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
<div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
<div *ngIf="i + 3 < items.length">{{ items[i + 3] }}</div>
<div *ngIf="i + 4 < items.length">{{ items[i + 4] }}</div>
</div>
</div>