blocks|key|4434507|text|我将使用以下语法将索引值设置为HTML元素的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434508|Angular+>=+2|4434509|您必须使用let而不是#来声明该值。|offset|length|style|CODE|4434510|<ul>
++++<li+*ngFor="let+item+of+items;+let+i+=+index"+[attr.data-index]="i">
++++++++{{item}}
++++</li>
</ul>|code-block|syntax|javascript|4434511|角度=1|4434512|<ul>
++++<li+*ngFor="#item+of+items;+#i+=+index"+[attr.data-index]="i">
++++++++{{item}}
++++</li>
</ul>|4434513|下面是更新后的版本：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview。|4434514|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview^0|0|0|5|3|B|1|0|0|0|0|A|1F|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$F|1D|G|1E|1|1F]]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

I would use this syntax to set the index value into an attribute of the HTML element:

<h3>Angular >= 2</h3>

You have to use <code>let</code> to declare the value rather than <code>#</code>.

<pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li *ngFor="let item of items; let i = index" [attr.data-index]="i"&gt;
 {{item}}
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3>Angular = 1</h3>

<pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li *ngFor="#item of items; #i = index" [attr.data-index]="i"&gt;
 {{item}}
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Here is the updated plunkr: <a href="http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview" rel="noreferrer">http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview</a>.

blocks|key|4434539|text|这只是一个更新，蒂埃里的答案仍然是正确的，但Angular2有一个关于以下方面的更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434540|<ul+*ngFor="let+item+of+items;+let+i+=+index"+[attr.data-index]="i">
++<li>{{item}}</li>
</ul>|code-block|syntax|javascript|4434541|现在，#i+=+index应为let+i+=+index|offset|length|style|CODE|4434542|编辑/更新：|4434543|*ngFor应该在您想要访问的元素上，因此对于本例，它应该是：|4434544|<ul>
++<li+*ngFor="let+item+of+items;+let+i+=+index"+[attr.data-index]="i">{{item}}</li>
</ul>|4434545|编辑/更新|4434546|角度5|4434547|<ul>
++<li+*ngFor="let+item+of+items;+index+as+i"+[attr.data-index]="i">{{item}}</li>
</ul>|4434548|EDIIT/更新|4434549|Angular+7/8|4434550|<ul+*ngFor="let+item+of+items;+index+as+i">
++<li+[attr.data-index]="i">{{item}}</li>
</ul>|4434551|entityMap^0|0|0|3|A|F|D|0|0|0|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@$I|1F|J|1G|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|14|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|15|$]]

Just an update to this, Thierry's answer is still correct, but there has been an update to Angular2 with regards to:

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

The <code>#i = index</code> should now be <code>let i = index</code>

EDIT/UPDATE:

The <code>*ngFor</code> should be on the element you're wanting to foreach, so for this example it should be:

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

EDIT/UPDATE 

Angular 5

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

EDIIT/UPDATE

Angular 7/8

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

blocks|key|4434594|text|我想这个问题以前已经回答过了，但这只是一个更正，如果你正在填充一个无序列表，*ngFor将会出现在你想要重复的元素中。所以它应该是insdide+<li>。此外，Angular2现在使用let来声明变量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4434595|<ul>
++++<li+*ngFor="let+item+of+items;+let+i+=+index"+[attr.data-index]="i">+++++
+++++++++++++++{{item}}
++++</li>
</ul>|code-block|syntax|javascript|4434596|entityMap^0|12|6|21|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

I think its already been answered before, but just a correction if you are populating an unordered list, the <code>*ngFor</code> will come in the element which you want to repeat. So it should be insdide <code>&lt;li&gt;</code>. Also, Angular2 now uses let to declare a variable. 

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

blocks|key|4434453|text|其他答案都是正确的，但您可以完全省略[attr.data-index]，只使用|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4434454|<ul>
++++<li+*ngFor="let+item+of+items;+let+i+=+index">{{i+%2B+1}}</li>
</ul|code-block|syntax|javascript|4434455|entityMap^0|I|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

The other answers are correct but you can omit the <code>[attr.data-index]</code> altogether and just use 

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

blocks|key|4434620|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434621|<div+*ngFor="let+piece+of+allPieces;+let+i=index">
{{i}}+//+this+will+give+index
</div>|code-block|syntax|javascript|4434622|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this

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

blocks|key|4434634|text|使用laravel分页|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4434635|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+%2B+i+}}</th>
+++</tr>|code-block|syntax|javascript|4434636|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

with laravel pagination

<pre><code>file.component.ts file

 datasource: any = {
 data: []
 }

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

html file

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

I have a simple <code>ngFor</code> loop which also keeps track of the current <code>index</code>. I want to store that <code>index</code> value in an attribute so I can print it. But I can't figure out how this works.

I basically have this:

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

I want to store the value of <code>#i</code> in the attribute <code>data-index</code>. I tried several methods but none of them worked.

I have a demo here: <a href="http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview" rel="noreferrer">http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview</a>

How can I store the <code>index</code> value in the <code>data-index</code> attribute?

ngFor with index as value in attribute

我有一个简单的ngFor循环，它也可以跟踪当前的index。我希望将该index值存储在一个属性中，以便可以打印它。但我搞不懂这是怎么回事。我基本上有这样的想法：<ul *ngFor="#item of items; #i = index" data-index="#i"> <li>{{item}}</li></...

问在属性中将索引作为值的ngFor
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在属性中将索引作为值的ngForEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在属性中将索引作为值的ngFor
EN