গুণ হিসাবে মান হিসাবে সূচী সঙ্গে এনজিফোর্ড

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= পূর্বরূপ

বৈশিষ্ট্যটিতে আমি কীভাবে indexমানটি সঞ্চয় করতে পারি data-index?

Answer 1

আমি এই বাক্য গঠনটি এইচডিএমএল উপাদানটির একটি বৈশিষ্ট্যে সূচকের মানটি সেট করতে ব্যবহার করব:

কৌণিক> = 2

letপরিবর্তে মান ঘোষণার জন্য আপনাকে ব্যবহার করতে হবে #।

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

কৌণিক = 1

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

এখানে আপডেট করা প্লঙ্কারটি রয়েছে: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p= পূর্বরূপ ।

Comments

আসলে, attr.এঙ্গুলার 2 কে বৈশিষ্ট্যের নামের সাথে অভিব্যক্তির মান সেট করতে বলতে একটি সিনট্যাক্স। এটি ঠিক JSON মূল্যায়নের মতো নয়, আমি অনুমান করি ;-) এই লিঙ্কটি দেখুন: কৌণিক.ই.ও.

— থিয়েরি

ধন্যবাদ, যে কৌশলটি। এছাড়াও, আমি ngForএর liপরিবর্তে এটি লাগাতে চাইছিলাম ul।

— বিবেকী

মূল উত্তর এবং নতুন আপডেট হওয়া কোড মান উভয়ই রাখতে আমি সাম্প্রতিক সম্পাদনাটি ফিরিয়ে আনি। আমি কিছু প্রাথমিক বিটা স্টাফ সন্ধান করছিলাম এবং দেখলাম যে এই উত্তরটি সংশোধিত হয়েছে, সুতরাং এটি আর কৌনিক 2 এর বিটা সংস্করণে প্রয়োগ করা হয়নি

— PS2goat

আপডেট: 08/2017 <ডিভ * এনজিফোর্ড = "বীরের নায়ক; যাক i = সূচক; ট্র্যাকবাই: ট্র্যাকবাইআইডি">

— ম্যাক্সি

অক্টোবর 17, 2018 অবধি কৌনিক 6 ব্যবহার করছে * এনজিফোর্ড = "আইটেমের আইটেম দিন; সূচি 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 ▸ API ▸ এনগফোরআফ

• বিবরণ
• স্থানীয় পরিবর্তনশীল

ইউনিট পরীক্ষার উদাহরণ

• ng_for_spec.ts

আর একটি আকর্ষণীয় উদাহরণ

• গোষ্ঠীবদ্ধ

Comments

এই হল! অক্টোবর 17, 2018 হিসাবে কাজ করা। ধন্যবাদ. (কেন তারা সিনট্যাক্স পরিবর্তন করে রাখে, এত বিরক্তিকর?

— জেল

এটি প্রথমটির চেয়ে ভাল এবং সহজ উত্তর।

— কেন্রি সানচেজ

index as iদুর্দান্ত কাজ করে, আপনাকে ধন্যবাদ। তবে *ngForপুনরাবৃত্তি করার মতো উপাদানটি চালিত করার উদ্দেশ্যে নয় (যেমন <li>এই ক্ষেত্রে)? আপনার প্রস্তাবিত কোডটি একাধিক <ul>s এর চেয়ে একাধিক <li>গুলি তৈরি করবে।

— লিরান এইচ

index as iএর চেয়ে আরও মার্জিতlet i = index

— ড্যাববিবি।

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>

সম্পাদনা / আপডেট

কৌণিক 5

<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

— গন্টার জ্যাচবাউয়ার

Answer 4

আমি মনে করি এর আগেই এর উত্তর দেওয়া হয়েছে, তবে একটি সংশোধন যদি আপনি একটি আনর্ডারড তালিকার তালিকা তৈরি করে *ngForথাকেন তবে সেই উপাদানটি আসবে যা আপনি পুনরাবৃত্তি করতে চান। সুতরাং এটি অভ্যন্তরীণ করা উচিত <li>। এছাড়াও, Angular2 এখন একটি ভেরিয়েবল ঘোষণা করতে লেট ব্যবহার করে।

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

Comments

আমি মনে করি যে * ট্যাগগুলির নির্দেশকে উল ট্যাগ <ul * এনজিফোর্স = "আইটেমের আইটেম হিসাবে আইটেম; আইডেক্স হিসাবে সূচি দেওয়া উচিত" নির্দিষ্ট করা ভাল অনুশীলন [ } </li> </ul>

— বজরান

যদি আপনি উল ট্যাগে এনজিফোর্স নির্দিষ্ট করে থাকেন, তবে যে সত্তাটি পুনরাবৃত্তি হবে তা উল হবে তবে এখানে আপনি উলটির পুনরাবৃত্তি করতে চান না, আপনি কেবল তালিকার উপাদানগুলিতে পুনরাবৃত্তি করতে চান, যেমন লি।

— মনিকা

Answer 5

অন্যান্য উত্তরগুলি সঠিক তবে আপনি [attr.data-index]পুরোপুরি বাদ দিতে পারেন এবং কেবল ব্যবহার করতে পারেন

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

Answer 6

আপনি সূচকটি ডেটা-ইনডেক্স বৈশিষ্ট্যটিতে সূচকটি সংরক্ষণ করতে সরাসরি [এট্রেডাটা-সূচক] ব্যবহার করতে পারেন যা কৌণিক সংস্করণ 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>