Angular 2
Angular - ForLoop
Sök…
Syntax
- <div * ngFor = "låt objekt; låt i = index"> {{i}} {{item}} </ div>
Anmärkningar
*ngFor strukturdirektivet körs som en slinga i en samling och upprepar en bit html för varje element i en samling.
@View dekoratör är nu avskrivet. Utvecklare bör använda template eller 'templateUrl'-egenskaper för @Component dekoratör.
Vinkelformig 2 för-loop
För live plnkr klicka ...
<!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
NgFor- direktivet instanserar en mall en gång per artikel från en iterable. Kontexten för varje instanserad mall ärver från den yttre kontexten med den givna slingvariabeln inställd på det aktuella objektet från iterable.
För att anpassa standardspårningsalgoritmen stöder NgFor alternativet trackBy . trackBy tar en funktion som har två argument: index och objekt. Om trackBy ges, ändras vinkelspår med funktionens returräge .
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Ytterligare alternativ : NgFor tillhandahåller flera exporterade värden som kan justeras till lokala variabler:
- index kommer att ställas in på den aktuella loop-iterationen för varje mallkontext.
- först kommer att ställas in på ett booleskt värde som indikerar om objektet är det första i iterationen.
- sist kommer att ställas in på ett booleskt värde som indikerar om objektet är det sista i iterationen.
- even kommer att ställas in på ett booleskt värde som indikerar om det här objektet har ett jämnt index.
- udda kommer att ställas in på ett booleskt värde som indikerar om det här objektet har ett udda index.
* ngFör i tabellraderna
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngFör komponent
@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;
}
* nGFör X antal artiklar per rad
Exempel visar 5 objekt per rad:
<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>