NgFor с индексом как значение в атрибуте

У меня простой цикл 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 атрибуте?

Ответы

Ответ 1

Я бы использовал этот синтаксис для установки значения индекса в атрибут элемента HTML:

Угловой> = 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=preview.

Ответ 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 ▸ NgForOf

Примеры юнит-тестов

ng_for_spec.ts

Еще один интересный пример

группирование

Ответ 3

Просто обновление, ответ Тьерри все еще правильный, но было обновление для Angular2 в отношении:

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

Индекс #i = index теперь должен быть let я = index

EDIT/UPDATE:

*ngFor должен быть на элементе, который вы хотите использовать для foreach, поэтому для этого примера это должно быть:

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

EDIT/UPDATE

Угловой 5

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

EDIIT/UPDATE

Угловой 7/8

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

Ответ 4

Я думаю, что его уже ответили ранее, но только исправление, если вы заполняете неупорядоченный список, *ngFor появится в элементе, который вы хотите повторить. Так что это должно быть insdide <li>. Кроме того, Angular2 теперь использует let для объявления переменной.

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

Ответ 5

Другие ответы верны, но вы можете вообще опустить [attr.data-index] и просто использовать

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

Ответ 6

Попробуй это

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

Ответ 7

В Угловом 5

<table class="table table-bordered" style="width:100%">
                    <thead>
                        <tr class="text-center">                            
                            <th>
                                #
                            </th>
                            <th>
                               header1
                            </th>
                            <th>
                                header2
                            </th>                           
                        </tr>
                    </thead>
                    <tbody class="ng-scope" *ngFor="let item of ItemList;index as i">
                        <tr>
                            <td>{{i+1}}</td>
                            <td>
                                {{item.Name}}
                            </td>
                            <td>
                                {{item.Age}}
                            </td> 
                        </tr>
                </table>