Angular 2
Angular - ForLoop
Suche…
Syntax
- <div * ngFor = "Artikel lassen; lassen Sie i = index"> {{i}} {{item}} </ div>
Bemerkungen
Die *ngFor Strukturanweisung wird als Schleife in einer Auflistung ausgeführt und wiederholt ein Stück HTML für jedes Element einer Auflistung.
@View Dekorator ist jetzt veraltet. Entwickler sollten template oder 'templateUrl'-Eigenschaften für den @Component Dekorator verwenden.
Winkel für 2-Schleife
Für Live- Programme klicken Sie auf ...
<!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 für Schleife
Die NgFor- Direktive instanziiert eine Vorlage einmal pro Element aus einer Iteration. Der Kontext für jede instanziierte Vorlage erbt vom äußeren Kontext, wobei die angegebene Schleifenvariable vom aktuellen Element auf das aktuelle Element gesetzt wird.
Um den Standard-Tracking-Algorithmus anzupassen, unterstützt NgFor die Option trackBy . trackBy nimmt eine Funktion mit zwei Argumenten: index und item. Wenn trackBy angegeben ist, ändert sich der Winkel um den Rückgabewert der Funktion.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Zusätzliche Optionen : NgFor stellt mehrere exportierte Werte zur Verfügung, die für lokale Variablen als Alias verwendet werden können:
- Der Index wird für jeden Schablonenkontext auf die aktuelle Schleifeniteration gesetzt.
- first wird auf einen booleschen Wert gesetzt, der angibt, ob das Element der erste in der Iteration ist.
- last wird auf einen booleschen Wert gesetzt, der angibt, ob das Element das letzte Element in der Iteration ist.
- even wird auf einen booleschen Wert gesetzt, der angibt, ob dieses Element einen geraden Index hat.
- odd wird auf einen booleschen Wert gesetzt, der angibt, ob dieses Element einen ungeraden Index hat.
* ngFür in den Tabellenzeilen
<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 mit Komponente
@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 Anzahl der Elemente pro Zeile
Beispiel zeigt 5 Elemente pro Zeile:
<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>
