表的数量

Question

请告诉我，如何在Angular 2中编写一些@Pipe或函数来在表中添加连续数字？这是我模板的一部分：

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

我会在<th>consecutive number</th>中添加连续的数字，并在@Pipe中添加一些<td>...<td>或其他函数，例如*ngFor指令或其他内容。

Answer 1

您可以使用索引获取连续数字，如下所示。索引从0开始，因此您可以使用索引+ 1。

data d2.i = 20

在你的情况下它应该是

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