Как создать столбец индекса в таблице HTML

Question

Мне нужно создать последовательный столбец объектов, полученных методом get внешнего API. Но я не могу создать этот столбец в таблице.

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>