CODEWITHSUNDEEP
angular
user13406409
user13406409

Reputation:

How to show a count number?

I have grouped data:

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

I display this data in template:

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

As you can see the grouped object has a total of 6 items. I need to show the numbers from 1 to 6 in the template at position {{ HERE SHOW NUMBER }}.

Upvotes: 0

Views: 1513

Answers (4)

printfmyname
printfmyname

Reputation: 971

You could create a new group with index information in it and iterate over it on the template

As a example, below groupsWithIndex contains objects what has keys key and docs. Docs contains list of object, each of which corresponds to a element in original group's objects values, holds the original value and a count (which is the index in this case).

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

  ngOnInit() {
    let index = 1;
    this.groups.forEach(group => {
      this.groupsWithIndex.push({
        key: group.key,
        docs: group.value.map(val => {
          return {
            index: index++,
            value: val,
          }
        }),
      })
    });
  }

Then on template:

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

It should print:

group1  
1 - Value is 1  
2 - Value is 2  
3 - Value is 3  
group2  
4 - Value is 3  
5 - Value is 4  
6 - Value is 5

Sample at https://stackblitz.com/edit/angular-mgmgco?file=src%2Fapp%2Fapp.component.ts

Upvotes: 0

Rafi Henig
Rafi Henig

Reputation: 6414

You might want to use a separate getter for it as demonstrated below:

Component

 get sum() {  return this.groups.reduce((x, y) => x + y.value.length }

Template

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

Upvotes: 0

Valentino Ru
Valentino Ru

Reputation: 5052

You are already iterating the sub-groups, you can just access the value in the template.

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

Upvotes: 1

FrenchCornichon
FrenchCornichon

Reputation: 13

Is this what you are looking for ?

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


groups.forEach(function(entry) {
    entry.value.forEach(function(val){
      console.log(val)
    })
});

Upvotes: 0

Related Questions