कोणीय 2 में * in * ngFor का अर्थ क्या है?

Question

निम्नलिखित नमूने में ngFor से पहले * का अर्थ क्या है और इसकी आवश्यकता क्यों है?

<div *ngFor="#hero of heroes" (click)="selectHero(hero)"> 
    {{hero.name}} 
</div> 

Answer 1

ngFor केवल एक <template> के लिए लागू किया जा सकता है। *ngFor एक छोटा सा रूप है जिसे किसी भी तत्व पर लागू किया जा सकता है और <template> तत्व दृश्य के पीछे पूरी तरह से बनाया गया है।

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

सिंटेक्स

• <li *ngFor="let item of items; let i = index">...</li>
• <li template="ngFor let item of items; let i = index">...</li>
• <template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

यह सब structural directives

Plunker example

अद्यतन

2.0.0 अंतिम रिलीज के साथ के लिए एक ही पैटर्न <ng-container> पेश किया गया था, कि <template> (एक आवरण तत्व यह है कि वास्तव में नहीं जोड़ा जाता है की तरह बर्ताव डीओएम) लेकिन *ngFor="..." वाक्यविन्यास का समर्थन करता है। आधिकारिक कोणीय प्रलेखन से

Answer 2

उद्धरण:

जब हम NgFor और NgIf निर्मित निर्देशों की समीक्षा की, हम बाहर वाक्य रचना के एक विषमता कहा जाता है: तारांकित (*) कि निर्देश पहले दिखाई देने वाला नाम।

* सिंटैक्टिक चीनी का एक सा है जो इसे पढ़ने में आसान बनाता है और टेम्पलेट्स की सहायता से HTML लेआउट को संशोधित करने वाले निर्देश लिखते हैं। NgFor, NgIf, और NgSwitch सभी <template> टैग में लिपटे तत्व उपट्री जोड़ें और निकालें।

अधिक विस्तार के लिए जाँच कृपया https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

* ngFor चार गुण है: सूचकांक, पिछले, भी, और अजीब। हम सूचकांक प्रति मान, अंतिम मूल्य, विषम, या यहां तक ​​कि सूचकांक भी स्थानीय चर का उपयोग कर मूल्य का मूल्य प्राप्त कर सकते हैं।

demoArray= [1,2,3,4,5,6,7,8,8,9]; 
<ul> 
    <li *ngFor='#item of demoArray #i=index #l=last #e=even'> 
    Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li> 
</ul> 

Answer 3

जब कोणीय ngFor में तारांकित (*) को देखता है, यह पाश रेंडर करने के लिए टेम्पलेट के रूप में अपनी डोम तत्व का उपयोग करेगा: यहाँ एक काम उदाहरण है।

<div *ngFor="#hero of heroes"> 
    {{ hero.name }} 
</div> 

<template ngFor #hero [ngForOf]="heroes"> 
    <div> 
     {{ hero.name }} 
    </div> 
</template> 

Answer 4

वे स्ट्रक्चरल निर्देशों के रूप में जाना जाता है के बराबर है, क्योंकि वे डोम संरचना को बदलने की क्षमता है। अधिक जानकारी के लिए आप https://angular.io/guide/structural-directives पर जा सकते हैं।

Answer 5

*ngFor में * एक टेम्पलेट टैग के साथ नई कोणीय टेम्पलेट सिंटेक्स के उपयोग के लिए एक आशुलिपि है, यह भी कहा जाता है संरचनात्मक Directive.It कि पता करने के लिए किया जाता है सिर्फ एक आशुलिपि स्पष्ट रूप से एक टेम्पलेट पर डेटा बाइंडिंग को परिभाषित करने के लिए सहायक है * टैग।