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


571

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

Відповіді:


998

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


4
Насправді, attr.це синтаксис, щоб сказати Angular2, щоб встановити значення виразу для імені атрибута. Думаю, це не просто так, як оцінювати JSON ;-) Дивіться це посилання: angular.io/docs/ts/latest/guide/template-syntax.html
Templier

1
Дякую, це робить трюк. Крім того, я мав намір поставити ngForна, liа не на ul.
Вівенді

1
Я відкрутив нещодавнє редагування, щоб мати як оригінальну відповідь, так і нове оновлене значення коду. Я шукав деякі ранні бета-матеріали і побачив, що ця відповідь була змінена, тому вона більше не застосовується до бета-версії кутового 2.
ps2goat

4
ОНОВЛЕННЯ: 08/2017 <div * ngFor = "нехай герой героїв; нехай i = індекс; trackBy: trackById">
Максі

4
станом на 17 жовтня 2018 р. Angular 6 використовує * ngFor = "пустіть об'єкти; індекс як i" Дивіться відповідь Лева нижче.
Гель

318

У кутовій 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

Приклади тестових одиниць

Ще один цікавий приклад


11
ось воно! Працює станом на 17 жовтня 2018 року. Дякую. (чому вони продовжують змінювати синтаксис, настільки дратівливий?
Гель

2
це краща і проста відповідь, ніж перша.
Кенрі Санчес

2
index as iчудово працює, дякую Але чи не *ngForмається на увазі перейти на елемент, який потрібно повторити (наприклад, <li>у цьому випадку)? Запропонований вами код створює декілька <ul>s, а не декілька <li>s.
Liran H

index as iє більш елегантним, ніжlet i = index
Дабббб.

108

Лише оновлення до цього, відповідь Тьєррі все ще правильна, але до 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>

3
І #itemмає бути let item;-)
Günter Zöchbauer

52

Я думаю, що на нього вже відповіли раніше, але лише виправлення, якщо ви заповнюєте не упорядкований список, *ngForввійде елемент, який ви хочете повторити. Отже, це повинно бути невпевненим <li>. Також Angular2 тепер використовує Let для оголошення змінної.

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

Я вважаю, що найкраще вказувати директиву * ngFor у ul tag <ul * ngFor = "нехай елемент елементів; індекс як i" [attr.data-index] = "i"> <li> {{item} } </li> </ul>
bajran

1
Якщо ви вкажете ngFor у тезі ul, то об'єкт, який буде повторюватися, буде ul, але тут ви не хочете повторити ul, ви просто хочете повторити елементи списку, тобто li.
monica

21

Інші відповіді правильні, але ви можете [attr.data-index]взагалі пропустити і просто скористатися

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

2

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

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

1

Спробуйте це

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

0

з ларавел пагінацією

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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.