在Angular的嵌套for循环中增加一个值计数器答案

【问题标题】：increment a value counter in a nested for loop in Angular在Angular的嵌套for循环中增加一个值计数器
【发布时间】：2019-04-10 02:56:20
【问题描述】：

我想在嵌套的 for 循环中增加一个计数器值，并在加载表时打印该值（如 1、2、3、4）。但问题是我的对象中有不同长度的值。认为表中有 100 行，所以计数器列必须打印 1-100。

<ng-container *ngFor= "let lot of all;">
        <tr *ngFor="let sensor of lot.income;" >
          <td>{{count++}}</td>  // counter here
          <td>{{lot.project.name}}</td>
          <td>{{sensor.incomeNo}}</td>
        </tr>
</ng-container>

我的对象在 JSON 中看起来像这样。

[
  {
    "project": {
      "project": "project_one",
      "code": "0000001"
    },
    "income": [
      {
        "incomeNo": 1,
        "discount": 0
      },
      {
        "incomeNo": 2,
        "discount": 0
      }
    ]
  },
  {
    "project": {
      "project": "project_two",
      "code": "0000002"
    },
    "income": [
      {
        "incomeNo": 3,
        "discount": 2
      },
      {
        "incomeNo": 4,
        "discount": 8
      },
    {
        "incometNo": 5,
        "discount": 14
      },
    {
        "incomeNo": 6,
        "discount": 3
      }
    ]
  }
]

【问题讨论】：

不确定您要做什么。但是你可以尝试使用索引。 <tr *ngFor="let sensor of lot.income;let index;" > <td>{{index++}}</td> 。在 angular.io tuts 部分有这方面的文档。
每个对象都有不同长度的值，所以在我的情况下不起作用。
@JamithNimantha 你能解释更多或预期的输出吗？
我想在加载表格时获取每一行的计数器（索引）。例如 1,2,3,4.. 等，但问题是每个对象都有不同长度的对象数组。
@JamithNimantha 试试这个：stackoverflow.com/a/42266663/7124761

标签： angular typescript

【解决方案1】：

您可以添加另一个局部变量来保存计数器，例如：let i = index;如下所示。要从 1 开始您的对象，请添加 {{i + 1}} 这应该可以工作

<ng-container *ngFor= "let lot of all;">
        <tr *ngFor="let sensor of lot.income; let i = index" >
          <td>{{i + 1}}</td>  // counter here
          <td>{{lotM.project.name}}</td>
          <td>{{sensor.incomeNo}}</td>
        </tr>
</ng-container>

【讨论】：

我尝试过使用索引，但它不起作用，因为我的每个对象中都有不同长度的值
你能在这里发布你的对象的sn-p吗？
我用我的对象更新了问题。请看一下。

【解决方案2】：

我尝试解决计数器问题，添加了 CSS 计数器，但您必须管理设计。

<table class="mainTable">
    <tr>
      <td width="20%">SR. No</td>
      <td width="20%">Income No</td>
      <td width="20%">Discount</td>
      <td width="20%">Name </td> 
      <td width="20%">Code</td> 
    </tr>
    <tr *ngFor="let sensor of ProductMain; let i = index">
      <td colspan="5">
        <table border="1" width="100%">
            <tr *ngFor="let lot of sensor.income; let i = index">
              <td width="20%" class="counter"><!-- Counter via CSS --></td>
              <td width="20%">{{lot.incomeNo}}</td>
              <td width="20%">{{lot.discount}}</td>
              <td width="20%">{{sensor.project.code}}</td>
              <td width="20%">{{sensor.project.project}}</td>
            </tr>
        </table>
      </td>
    </tr>
  </table>

在css文件中添加：

.mainTable{
    counter-reset: section;
}
.counter::before {
    counter-increment: section;
    content: counter(section) ") ";
}

【讨论】：