Question

我想在嵌套的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
      }
    ]
  }
]

Answer 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>

Answer 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) ") ";
}

在Angular的嵌套for循环中增加值计数器

2 个答案: