Angular 如何显示计数数字？

我已将数据分组：

let groups = [{key: 'group1', value: [1,2,3]}, {key: 'group2', value: [3,4,5]}];

我在模板中显示此数据：

   <ng-container *ngFor="let group of groups">
       <tr>
          <td class="align-top tr-title-gray font-weight-bold" colspan="7">
            {{ group.key }}
          </td>
         </tr>
         <tr *ngFor="let doc of group.value">
              <td class="align-top text-nowrap td-number">{{ HERE SHOW NUMBER }}.</td>
         </tr>
   </ng-container>

<ng-container *ngFor="let group of groupsWithIndex">
    <tr>
        <td class="align-top tr-title-gray font-weight-bold" colspan="7">
            {{ group.key }}
        </td>
    </tr>
    <tr *ngFor="let doc of group.docs">
        <td class="align-top text-nowrap td-number">{{ doc.index }} - Value is {{ doc.value }}</td>
    </tr>
</ng-container>

{{group.key}}
{{此处显示编号}}。

---

如您所见，分组对象共有6项。我需要在模板的位置

{{HERE show NUMBER}}

显示从1到6的数字，这就是您要找的吗

let group=[{key:'group1'，value:[1,2,3]}，{key:'group2'，value:[3,4,5]}]
groups.forEach（函数（条目）{
entry.value.forEach（函数（val）{
console.log（val）
})
});您已经在迭代子组，您可以访问模板中的值

<tr *ngFor="let doc of group.value">
  <td class="align-top text-nowrap td-number">{{ doc }}.</td>
</tr>


{{doc}}。
您可能需要为其使用单独的getter，如下所示：

组件

get sum（）{返回this.groups.reduce（（x，y）=>x+y.value.length}

模板


{{sum}}。
您可以创建一个包含索引信息的新组，并在模板上对其进行迭代

例如，下面的groupsWithIndex包含具有键的对象
key
和
docs
。docs包含对象列表，每个对象对应于原始组对象值中的一个元素，保存原始值和计数（在本例中为索引）

然后在模板上：

   <ng-container *ngFor="let group of groups">
       <tr>
          <td class="align-top tr-title-gray font-weight-bold" colspan="7">
            {{ group.key }}
          </td>
         </tr>
         <tr *ngFor="let doc of group.value">
              <td class="align-top text-nowrap td-number">{{ HERE SHOW NUMBER }}.</td>
         </tr>
   </ng-container>

<ng-container *ngFor="let group of groupsWithIndex">
    <tr>
        <td class="align-top tr-title-gray font-weight-bold" colspan="7">
            {{ group.key }}
        </td>
    </tr>
    <tr *ngFor="let doc of group.docs">
        <td class="align-top text-nowrap td-number">{{ doc.index }} - Value is {{ doc.value }}</td>
    </tr>
</ng-container>

样本位于
您可以在
ngFor
中使用
索引
，然后在其上加上一个。对于从0到group的每个group index，它将是work fpor group。length-1，但我需要显示属于group的每个元素的编号。您需要显示存储在value属性中的值，还是显示从1到t的累加器o对象的长度值长度？这不是打印1,2,3,3,4,5而不是1,2,3,4,5吗，6@printfmyname如果目标是显示属性值中的值，那么这很好，因为这些值实际上是[1 2 3][3 4 5]看起来您的答案打印的是1 2 3 3 4 5，但问题显示的是1-6。您正在打印val，但问题要求的位置应为索引。我建议创建计数=0并打印计数++