Obtener índice en a para directive de directiva en Angular 2

Question

Obtener índice en a para directive de directiva en Angular 2

A partir de ahora, ¿hay una manera de obtener el índice actual del iterable en una directiva for..of en Angular 2? En otras palabras, el equivalente de $index en Angular.js v1...

Ejemplo de código:

<ul *for="#task of allTasks">
    <li>{{ $index}} - {{ task.label }}</li>
</ul>

(por supuesto este código no funciona, no proporciona el índice actual)

22

angular

Author: Daniel W Strimpel, 2015-03-30

Source

4 answers

La sintaxis ha sido actualizada y es ahora (a partir de Angular2.beta13, abril de 2016):

<li *ngFor="let item of items; let i = index"></li>

Por ejemplo:

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

17

Author: Julien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-09 02:52:45

Use * ngFor, let:

<li *ngFor="let menu of tempMenuModel.MenuItems.Items;let i=index" [ngClass]="{'active' : clickedItem == i}" (click)="SelectMenu(menu,i)">
      <span>{{menu.Header ==null?menu.Name:menu.Header}}</span>
</li>

Componente:

SelectMenu(menu, $index) {       
    this.clickedItem = $index;        
}

3

Author: Sandip Patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-09 02:53:12

Update, use let, not #

<div *ngFor="let user of users; let i=index">
    {{i}}
</div>

0

Author: robert king,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-09 02:53:23

score 49 · Accepted Answer

<ul>
    <template ngFor let-task [ngForOf]="allTasks" let-i="index">
        <li>{{ i }} - {{ task.label }}</li>
    </template>
</ul>

Pero tienes que usar la versión más reciente del quickstart

Por cierto - lo anterior es el equivalente de la siguiente sintaxis sugar

<li *ngFor="let task of allTasks; let i=index">{{ i }} - {{ task.label }}</li>