如何在HTML表中创建索引列

Question

我需要创建一个由外部API的get方法获得的对象的串行列。但是我无法在表中创建此列。

HTML

<table class="table table-bordered">
      <thead>
         <th scope="col">#</th>
         <th scope="col">Nome</th>
         <th scope="col">Sobrenome</th>
         <th scope="col">Participação</th>
      </thead>
      <tbody>
         <tr id="table-grid" *ngFor="let chart of charts">
            <th>{{chart.id}}</th>
            <td>{{chart.name}}</td>
            <td>{{chart.lastname}}</td>
            <td>{{chart.participation}}%</td>
         </tr>
      </tbody>
  </table>

组件：

  ngOnInit() {
    this.ChartGraph();
    this.Parallax();
  }
  getId() {

  }
  ChartGraph() {
    this.mainService.getChart().subscribe(data => this.charts = data)

JSON：

[{
    "name": "Carlos",
    "lastname": "Moura",
    "participation": 5.00
}, {
    "name": "Fernanda",
    "lastname": "Oliveira",
    "participation": 15.00
}, {
    "name": "Hugo",
    "lastname": "Silva",
    "participation": 20.00
}, {
    "name": "Eliza",
    "lastname": "Souza",
    "participation": 20.00
}, {
    "name": "Anderson",
    "lastname": "Santos",
    "participation": 40.00
}]

我需要表格看起来像这样：

当前看起来像这样：

Answer 1

ngFor为您提供每次迭代的index。您只需要使用以下内容-

<tr id="table-grid" *ngFor="let chart of charts; let i = index">
    <th>{{(i + 1)}}</th>