无论如何要在 table 中显示序列号？

Question

我现在是新手 angular，所以如果我的实现有任何错误，请告诉我，

我的 HTML 代码来自 component.html 文件

<table id="table">
   <tr>
     <th>Sl.No.</th>
     <th>Name</th>
     <th>Email</th>
     <th>Phone Number</th>
     <th>Skill</th>
     <th>Gender</th>
   </tr>
   <tr *ngFor = " let i of counter()">
     <td></td> <!-- To print the serial number here -->
     <td>{{nameFromLocalStorage}}</td>
     <td>{{emailFromLocalStorage}}</td>
     <td>{{phoneFromLocalStorage}}</td>
     <td>{{skillFromLocalStorage}}</td>
     <td>{{genderFromLocalStorage}}</td>
     <td>
       <button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
     </td>
   </tr> 
</table>

这是 component.ts 文件

中 counter() 的代码

counter() {
    //TO DO
    //Implementation is remaining,
    return new Array(20);
  }

计数器应该 return 一个值，该值将由 *ngFor 指令中的 html 文件捕获，并基于该值创建所需的数字的行。然后我想在table.

的第一列显示序列号

根据上面的代码，我可以得到 20 行。

注意：- 我已经在 CSS 中看到了解决方案，并且在它剩下唯一的选择之前不希望实施。

我的问题是如何获得序列号。

据我理解，*ngFor指令中的i应该是从零开始的，所以，有没有直接显示i的值呢。

如果你能帮助我学习并纠正我的错误，我将非常高兴。

先谢谢了。

Answer 1

是的，你可以简单地循环它不知道你的序列号是什么，如果它来自数组，那么只需使用 CounterArr.Serial_No。

 <tr *ngFor = " let CounterArr of counter();let i = index;">
     <td>{{i+1}}</td> 
     <td>{{CounterArr.nameFromLocalStorage}}</td>
     <td>{{CounterArr.emailFromLocalStorage}}</td>
     <td>{{CounterArr.phoneFromLocalStorage}}</td>
     <td>{{CounterArr.skillFromLocalStorage}}</td>
     <td>
       <button (click)="delete()" ><img src="./assets/icon/trash.png"></button>
     </td>
   </tr>

无论如何要在 table 中显示序列号？

Is there anyway to show serial number in a table?

javascript

typescript

angular-directive

angular