Angular 2
Угловая - ForLoop
Поиск…
Синтаксис
- <div * ngFor = "let item of items; пусть i = index"> {{i}} {{item}} </ div>
замечания
Структурная директива *ngFor работает как цикл в коллекции и повторяет фрагмент html для каждого элемента коллекции.
@View decorator теперь устарел. Разработчики должны использовать template или свойства templateUrl для декоратора @Component .
Угловая 2 для петли
Для live plnkr нажмите ...
<!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 - разметка для цикла
Директива NgFor создает экземпляр шаблона один раз для каждого элемента из итерабельного. Контекст для каждого экземпляра-шаблона наследуется от внешнего контекста с заданной переменной цикла, установленной для текущего элемента из итерабельного.
Чтобы настроить алгоритм отслеживания по умолчанию, NgFor поддерживает функцию trackBy . trackBy принимает функцию, которая имеет два аргумента: index и item. Если указано trackBy , угловые дорожки изменяются по возвращаемому значению функции.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Дополнительные параметры : NgFor предоставляет несколько экспортированных значений, которые могут быть сглажены для локальных переменных:
- index будет установлен на текущую итерацию цикла для каждого контекста шаблона.
- сначала будет установлено логическое значение, указывающее, является ли элемент первым в итерации.
- last будет установлен на логическое значение, указывающее, является ли элемент последним в итерации.
- даже будет установлено логическое значение, указывающее, имеет ли этот элемент четный индекс.
- нечетное будет установлено в логическое значение, указывающее, имеет ли этот элемент нечетный индекс.
* ngFor в строках таблицы
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngFor с компонентом
@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;
}
* ngFor X количество элементов в строке
Пример показывает 5 элементов в строке:
<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>