Angular 2
Angular - ForLoop
Szukaj…
Składnia
- <div * ngFor = "let item of items; let i = index"> {{i}} {{item}} </ div>
Uwagi
*ngFor strukturalna *ngFor działa jako pętla w kolekcji i powtarza fragment HTML dla każdego elementu kolekcji.
Dekorator @View jest teraz przestarzały. Programiści powinni używać właściwości template lub „templateUrl” dla dekoratora @Component .
Pętla kątowa 2
Na żywo plnkr kliknij ...
<!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
Dyrektywa NgFor tworzy szablon raz na element z iterowalnego. Kontekst dla każdego utworzonego szablonu dziedziczy z kontekstu zewnętrznego z daną zmienną pętli ustawioną na bieżący element z iterowalnego.
Aby dostosować domyślny algorytm śledzenia, NgFor obsługuje opcję trackBy . trackBy przyjmuje funkcję, która ma dwa argumenty: indeks i element. Jeśli podano trackBy , ścieżki kątowe zmieniają się o wartość zwracaną przez funkcję.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Dodatkowe opcje : NgFor udostępnia kilka eksportowanych wartości, które można aliować do zmiennych lokalnych:
- indeks zostanie ustawiony na bieżącą iterację pętli dla każdego kontekstu szablonu.
- first zostanie ustawiony na wartość logiczną wskazującą, czy element jest pierwszym w iteracji.
- last zostanie ustawiony na wartość logiczną wskazującą, czy element jest ostatnim w iteracji.
- nawet zostanie ustawiony na wartość logiczną wskazującą, czy ten element ma indeks parzysty.
- nieparzysty zostanie ustawiony na wartość logiczną wskazującą, czy ten element ma indeks nieparzysty.
* ng Dla wierszy tabeli
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngFor z komponentem
@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;
}
* ngDla X elementów w rzędzie
Przykład pokazuje 5 elementów w rzędzie:
<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>
