Eduard Arevshatyan Eduard Arevshatyan - 2 months ago 7
TypeScript Question

Numbers of table

Tell me please, how to write in Angular 2 some

@Pipe
or function to add a consecutive number in table? this is a part of my template:

<table class="table table-bordered table, table table-hover">
<thead>
<tr>
<td colspan="12" align="center">none</td>
</tr>
<tr>
<th>consecutive number</th>
<th>none</th>
<th>none</th>
</tr>
<tr style="background: #F5F5F5">
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="8"></td>
<td colspan="2">none: none</td>
<td colspan="2">none: none</td>
</tr>
</tfoot>
<tbody>
<template ngFor let-list [ngForOf]="lists">
<tr>
<td></td>
<td>{{ list.name }}</td>
<td>{{ list.location }}</td>
</tr>
<div [hidden]="!list.isVisible">
<br>
<table>
<thead>
<tr>
<th>none</th>
<th>none</th>
<th>none</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let new_var of list.hops">
<td>{{ new_var.hop_type }}</td>
<td>{{ new_var.hop_text }}</td>
<td>{{ new_var.id_sl_hop }}</td>
</tr>
</tbody>
</table>


I would add consecutive number in
<th>consecutive number</th>
, and add some
@Pipe
or another function in
<td>...<td>
, like
*ngFor
directive, or something else.

Answer

You can use index for getting the consecutive numbers, something like this. Index starts from 0, so you can have index + 1.

<tr *ngFor="let item of rows; let i= index">
  <td> {{i+1}} </td>
  <td> {{item.name}} </td>
</tr>

In your case it should be

<template ngFor let-list [ngForOf]="lists" let-i="index"> 

</template>