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атрибуте?

Я бы использовал этот синтаксис для установки значения индекса в атрибут элемента 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 .

В угловой 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

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

• Группировка

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

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

Теперь #i = indexдолжно бытьlet i = index

EDIT / UPDATE:

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

<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>

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

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

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

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

Вы можете использовать [attr.data-index] напрямую, чтобы сохранить индекс в атрибуте data-index, который доступен в Angular версии 2 и выше.

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

Попробуй это

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

с пагинацией

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>