Angular 2
Angular - ForLoop
Buscar..
Sintaxis
- <div * ngFor = "dejar elemento de elementos; dejar i = indexar"> {{i}} {{elemento}} </ div>
Observaciones
La directiva estructural *ngFor se ejecuta como un bucle en una colección y repite un fragmento de html para cada elemento de una colección.
@View decorator ahora está en desuso. Los desarrolladores deben usar las propiedades de template o 'templateUrl' para @Component decorator.
Angular 2 for-loop
Para hacer clic plnkr en vivo ...
<!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 directiva NgFor crea una instancia de una plantilla por elemento desde un iterable. El contexto para cada plantilla instanciada se hereda del contexto externo con la variable de bucle dada establecida en el elemento actual del iterable.
Para personalizar el algoritmo de seguimiento predeterminado, NgFor admite la opción trackBy . trackBy toma una función que tiene dos argumentos: índice y elemento. Si se proporciona trackBy , las pistas angulares cambian según el valor de retorno de la función.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Opciones adicionales : NgFor proporciona varios valores exportados que pueden ser asignados a las variables locales:
- El índice se establecerá en la iteración del bucle actual para cada contexto de plantilla.
- primero se establecerá en un valor booleano que indica si el elemento es el primero en la iteración.
- el último se establecerá en un valor booleano que indica si el elemento es el último en la iteración.
- incluso se establecerá en un valor booleano que indica si este elemento tiene un índice par.
- odd se establecerá en un valor booleano que indica si este elemento tiene un índice impar.
* ngFor en las filas de la tabla
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngFor con 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;
}
* ngPara X cantidad de artículos por fila
El ejemplo muestra 5 artículos por fila:
<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>