Group data in the view

My question arises because I need to show the data of a query to my Database in a more aesthetic way, I explain:

I have a table in which I store sports teams, but each team has a group, for example when playing a qualifying tournament by groups (A, B, C, etc.):

  

In my case they are amateur sports teams from my city. I have put the   equipment for greater global understanding.

So I need to group the data by group and not show each group in each football team (Something like that):

This way I am listing the sports teams:

<ion-list-header color="blue" *ngIf="mensajeSinFases == undefined">
  <div class="row" >
    <div class="col">PS</div>
    <div class="col">EQUIPO</div>
    <div class="col">PG</div>
    <div class="col">PE</div>
    <div class="col">PP</div>
    <div class="col">PTS</div>
  </div>
  </ion-list-header>
  <ion-item-group *ngFor="let tabla of clasificacion; index as i">
    <div class="row" text-center >
      <ion-item-divider text-center>
        <strong>{{tabla.nombre_grupo_clasificacion}}</strong>
      </ion-item-divider>
      <div class="col">{{i+1}}</div>
      <div class="col">{{tabla.nombre_equipo}}</div>
      <div class="col">{{tabla.pg_clasificacion}}</div>
      <div class="col">{{tabla.pe_clasificacion}}</div>
      <div class="col">{{tabla.pp_clasificacion}}</div>
      <div class="col">{{tabla.pts_clasificacion}}</div>
    </div>
  </ion-item-group>

And this would be the expected result (Example):

How could you limit a single group and not be repeated each time by team, in addition to each team position has to reach the last team in group A, so the index should return to one when it passes to group B, then to 1 to group C and so on?