अनुक्रमणिका के साथ ngFor विशेषता में मान के रूप में

Question

मेरे पास एक साधारण ngForलूप है जो करंट पर भी नज़र रखता है index। मैं उस indexमूल्य को एक विशेषता में संग्रहीत करना चाहता हूं ताकि मैं इसे प्रिंट कर सकूं। लेकिन मैं यह पता नहीं लगा सकता कि यह कैसे काम करता है।

मेरे पास मूल रूप से यह है:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

मैं #iविशेषता के मूल्य को संग्रहीत करना चाहता हूं data-index। मैंने कई तरीके आजमाए लेकिन उनमें से किसी ने भी काम नहीं किया।

मेरा यहाँ एक डेमो है: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

मैं indexमूल्य को data-indexविशेषता में कैसे संग्रहीत कर सकता हूं ?

Answer 1

मैं एचटीएमएल तत्व की विशेषता में सूचकांक मान सेट करने के लिए इस सिंटैक्स का उपयोग करूंगा:

कोणीय> = 2

आपको इसके letबजाय मूल्य घोषित करने के लिए उपयोग करना होगा #।

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

कोणीय = १

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

यहां अपडेट किया गया प्लंकर है: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview ।

Comments

वास्तव में, attr.एंगुलर 2 को विशेषता के नाम पर अभिव्यक्ति का मूल्य निर्धारित करने के लिए एक वाक्यविन्यास है। : यह सिर्फ JSON के मूल्यांकन की तरह नहीं है, मुझे लगता है कि ;-) यह लिंक देखें angular.io/docs/ts/latest/guide/template-syntax.html

— थियरी TEMPLIER

धन्यवाद, यह चाल है। इसके अलावा, मैं ngForके liबजाय पर डाल मतलब था ul।

— विवेंडी

मैंने मूल उत्तर और नए अपडेट किए गए कोड मान दोनों के लिए हाल के संपादन को वापस ले लिया। मैं कुछ शुरुआती बीटा सामानों को खोज रहा था और देखा कि यह उत्तर संशोधित किया गया था, इसलिए यह अब कोणीय 2 के बीटा संस्करण पर लागू नहीं होता है

— ps2goat

अद्यतन: 08/2017 <div * ngFor = "नायकों का नायक होने दो; मैं = अनुक्रमणिका; ट्रैकबाय: ट्रैकबायर्ड">

— मैक्सी

17 अक्टूबर, 2018 के अनुसार कोणीय 6 * ngFor = "आइटमों का उपयोग कर रहा है; सूचकांक के रूप में i" नीचे लियो का उत्तर देखें।

— गेल

Answer 2

कोणीय 5/6/7/8 में:

<ul>
  <li *ngFor="let item of items; index as i">
    {{i+1}} {{item}}
  </li>
</ul>

---

पुराने संस्करणों में

<ul *ngFor="let item of items; index as i">
  <li>{{i+1}} {{item}}</li>
</ul>

---

Angular.io ular API F NgForOf

• विवरण
• स्थानीय चर

इकाई परीक्षण उदाहरण

• ng_for_spec.ts

एक और दिलचस्प उदाहरण

• समूहन

Comments

यह बात है! अक्टूबर 17, 2018 तक कार्य करना। धन्यवाद। (क्यों वे वाक्यविन्यास बदलते रहते हैं, इतना कष्टप्रद?

— जेल

यह पहले वाले की तुलना में बेहतर और सरल उत्तर है।

— केनेरी सांचेज

index as iमहान काम करता है, धन्यवाद। लेकिन *ngForदोहराया जाने वाले तत्व (जैसे <li>इस मामले में) पर जाने का मतलब नहीं है ? आपके द्वारा सुझाया गया कोड कई <ul>s से कई <li>s rathers बनाता है ।

— लीरन एच।

index as iकी तुलना में अधिक सुंदर हैlet i = index

— Dabbbb।

Answer 3

इस के लिए बस एक अद्यतन, थियरी का जवाब अभी भी सही है, लेकिन एंगुलर 2 के संबंध में एक अद्यतन किया गया है:

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

#i = indexअब होना चाहिएlet i = index

संपादित करें / अपडेट:

*ngForइस उदाहरण यह होना चाहिए के लिए बहुत तत्व आप foreach के लिए इच्छुक रहे हैं पर होना चाहिए,:

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

संपादित करें / अपडेट

कोणीय ५

<ul>
  <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>

EDIIT / अपडेट

कोणीय 7/8

<ul *ngFor="let item of items; index as i">
  <li [attr.data-index]="i">{{item}}</li>
</ul>

Comments

और #itemहोना चाहिए let item;-)

— गुंटर Zöchbauer

Answer 4

मुझे लगता है कि इसका उत्तर पहले ही दिया जा चुका है, लेकिन सिर्फ एक सुधार यदि आप एक अव्यवस्थित सूची को आबाद कर रहे हैं, तो *ngForवह तत्व आ जाएगा , जिसे आप दोहराना चाहते हैं। इसलिए इसका अपमान होना चाहिए <li>। इसके अलावा, Angular2 अब वैरिएबल घोषित करने के लिए Let का उपयोग करता है।

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>

Comments

मुझे लगता है कि उल टैग * उल * ngFor = "आइटम के आइटम में ngFor निर्देश को निर्दिष्ट करना सबसे अच्छा अभ्यास है; I के रूप में सूचकांक;" } </ li> </ ul>

— बजरन

यदि आप उल टैग में ngFor निर्दिष्ट करते हैं, तो दोहराई जाने वाली इकाई उल हो जाएगी, लेकिन यहां u न उल उल दोहराना चाहते हैं, आप बस सूची तत्वों यानी ली पर पुनरावृति करना चाहते हैं।

— मोनिका

Answer 5

अन्य उत्तर सही हैं लेकिन आप [attr.data-index]पूरी तरह से छोड़ सकते हैं और बस उपयोग कर सकते हैं

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul

Answer 6

आप अनुक्रमणिका को डेटा-इंडेक्स विशेषता को बचाने के लिए सीधे [attr.data-index] का उपयोग कर सकते हैं जो कोणीय संस्करणों 2 और इसके बाद के संस्करण में उपलब्ध है।

    <ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
         <li>{{item}}</li>
    </ul>

Answer 7

इसे इस्तेमाल करे

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>

Answer 8

लार्वा पेजेशन के साथ

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>