Angular 2
Angolare - ForLoop
Ricerca…
Sintassi
- <div * ngFor = "let item of items; let i = index"> {{i}} {{item}} </ div>
Osservazioni
La direttiva strutturale *ngFor viene eseguita come un ciclo in una raccolta e ripete una parte di html per ciascun elemento di una raccolta.
@View decorator ora è deprecato. Gli sviluppatori dovrebbero utilizzare le proprietà template o 'templateUrl' per @Component decorator.
Angular 2 for-loop
Per live plnkr clicca ...
<!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
La direttiva NgFor istanzia un modello una volta per elemento da un iterabile. Il contesto per ogni modello istanziato eredita dal contesto esterno con la variabile di ciclo specificata impostata sull'elemento corrente dal iterabile.
Per personalizzare l'algoritmo di tracciamento predefinito, NgFor supporta l' opzione trackBy . trackBy accetta una funzione che ha due argomenti: index e item. Se viene dato trackBy , le tracce angolari cambiano in base al valore di ritorno della funzione.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Opzioni aggiuntive : NgFor fornisce diversi valori esportati che possono essere alterati in variabili locali:
- l'indice verrà impostato sull'iterazione del ciclo corrente per ogni contesto del modello.
- il primo sarà impostato su un valore booleano che indica se l'elemento è il primo nell'iterazione.
- l'ultimo sarà impostato su un valore booleano che indica se l'elemento è l'ultimo nell'iterazione.
- anche verrà impostato su un valore booleano che indica se questo elemento ha un indice pari.
- dispari sarà impostato su un valore booleano che indica se questo elemento ha un indice dispari.
* ngPer le righe del tavolo
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngPer il componente
@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;
}
* ngPer la quantità X di articoli per riga
L'esempio mostra 5 articoli per riga:
<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>