ngДо індексу як значення в атрибуті

У мене є простий 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>

Ось оновлений plunkr: 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

РЕДАКТУВАННЯ / ОНОВЛЕННЯ:

Цей *ngForелемент повинен бути на елементі, який ви хочете передбачити, тому для цього прикладу слід:

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

РЕДАКЦІЯ / ОНОВЛЕННЯ

Кутовий 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] безпосередньо для збереження індексу до атрибута index-index, який доступний у кутових версіях 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>