反正有没有在表格中显示序列号？ [复制]

Question

我目前是新的角度，所以如果我的实现中有任何错误，请告诉我，

这是来自 component.html 文件的我的 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);
  }

计数器应该返回一个值，该值将由 html 文件在*ngFor 指令中捕获，并基于该值创建所需的行数。然后我想在表格的第一列显示序列号。

根据上面的代码，我可以得到 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>