如何在HTML表格中创建索引列 [英] how do I create an index column in HTML Table

问题描述

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

I need to create a serial column of objects obtained by the get method of an external API. But I can not create this column in the table.

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
}]

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

I need the table to look like this:

当前看起来像这样:

currently it looks like this:

推荐答案

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

ngFor provides you an index of every iteration. You simply need to use the same as follows -

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

这篇关于如何在HTML表格中创建索引列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！