Angular 2
कोणीय - ForLoop
खोज…
वाक्य - विन्यास
- <div * ngFor = "आइटमों को जाने दो; मैं = इंडेक्स"> {{i}} {{आइटम}}} / अन्य आइटम>
टिप्पणियों
*ngFor संरचनात्मक निर्देश संग्रह में एक लूप के रूप में चलता है और संग्रह के प्रत्येक तत्व के लिए html का एक टुकड़ा दोहराता है।
@View डेकोरेटर अब पदावनत हो गया है। डेवलपर्स @Component डेकोरेटर के लिए template या 'templateUrl' गुणों का उपयोग करना चाहिए।
लूप के लिए कोणीय 2
<!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 एक फ़ंक्शन लेता है जिसमें दो तर्क होते हैं: सूचकांक और आइटम। यदि TrackBy दिया जाता है, तो कोणीय फ़ंक्शन के रिटर्न मान से परिवर्तन होता है।
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
अतिरिक्त विकल्प : 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;
}
* एनजीफ़ोर एक्स राशि प्रति पंक्ति आइटम
उदाहरण प्रति पंक्ति 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>
