Angular: Reset index value in the same template

Question

I have a template of 3 tables having same JSON as parent like this.

<tbody>
    <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index">
        <tr *ngIf="row.swRecommendations">
            <td>{{i+1}}</td>
            <td> {{row.swRecommendations.deviceID}}</td>
        </tr>
     </ng-container>
</tbody>

Another table body

<tbody>
    <ng-container *ngFor="let row of reportingData.RecommendationData; let j=index">
        <tr *ngIf="row.licenseRecommendations">
            <td>{{j+1}}</td>
            <td> {{row.licenseRecommendations.deviceID}}</td>
        </tr>
     </ng-container>
</tbody>

All these tables are in the same template. I'm assigning index values to different variables(i & j) but increment is happening i.e. if first table is having 5 rows, second table is starting with 6 not 1. How to fix this?

Answer 1

I tested you'r code and indexes are starting from 0 . Please review my code.

Component.html

<h1>First Table</h1>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <ng-container>
        <tr *ngFor="let a of array;let i = index">
            <th>{{i + 1}}</th>
            <th>{{a.name}}</th>
        </tr>
    </ng-container>
</table>
<h1>Second Table</h1>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <ng-container>
        <tr *ngFor="let a of array;let j = index">
            <th>{{j + 1}}</th>
            <th>{{a.name}}</th>
        </tr>
    </ng-container>
</table>

Component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: ['./app.component.scss']
})
export class AppComponent {
    constructor() {}
    public array = [
        { id: 1, name: 'aaa'},
        { id: 2, name: 'bbb'},
        { id: 3, name: 'ccc'},
        { id: 4, name: 'ddd'},
        { id: 5, name: 'eee'},
        { id: 6, name: 'fff'},
    ]
}