我该如何创建HTML表的索引列(how do I create an index column in

我需要建立由外部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>

文章来源: how do I create an index column in HTML Table