Angular - Как разбить дочерний компонент, содержащий HTML-таблицу, на родительский компонент

Question

Я пытаюсь разбить на страницы дочерний компонент, содержащий таблицу из родительского компонента. Директива нумерации страниц из ngx-pagination не влияет на строки таблицы. Я хочу показать 5 строк на странице.

В настоящее время я связываю входной объект с дочерним компонентом через * ngFor для отображения данных в таблице. Я попытался поиграть с размещением * ngFor, но ничего не получается.

Родительский компонент HTML:

<total-score-table
    *ngFor="let game of games | paginate: config; let even = even; let last = last"
    [game]="game"
    (gameNameClick)="openDetails(game)"
    (onLoadFinished)="calculateFinished$.next()"
    [players]="selectedTeam?.players"
    [ngClass]="{ 'bb-even-table': even, 'bb-last-table': last }"
></total-score-table>

<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

Дочерний компонент HTML:

    <table class="profile-table">
      <tbody>
          <tr>
            <td class="cell">
              <div
                class="game-name click-able"
                tappable
                (click)="gameNameClick.emit($event)"
              >
                {{ rowLabel }}
              </div>
            </td>
            <td class="cell">
              <div class="time-playing">
                <label>{{ getFormattedTime(totalStats?.playing_time) }}</label>
                <label class="sub-label"></label>
              </div>
            </td>
            <td class="cell">
              <label>
                {{ (totalStats?.made_2pt || 0) + (totalStats?.made_3pt || 0) }} -
                {{
                  (totalStats?.made_2pt || 0) +
                    (totalStats?.made_3pt || 0) +
                    (totalStats?.miss_2pt || 0) +
                    (totalStats?.miss_3pt || 0)
                }}
              </label>
              <label class="sub-label"> {{ totalStats.percent_fg || 0 }}% </label>
            </td>
            <td class="cell">
              <label>
                {{ totalStats?.made_2pt || 0 }} -
                {{ (totalStats?.made_2pt || 0) + (totalStats?.miss_2pt || 0) }}
              </label>
              <label class="sub-label"> {{ totalStats.percent_2pt || 0 }}% </label>
            </td>
            <td class="cell">
              <label>
                {{ totalStats?.made_3pt || 0 }} -
                {{ (totalStats?.made_3pt || 0) + (totalStats?.miss_3pt || 0) }}
              </label>
              <label class="sub-label"> {{ totalStats.percent_3pt || 0 }}% </label>
            </td>
            <td class="cell">
              <label>
                {{ totalStats?.made_ft || 0 }} -
                {{ (totalStats?.made_ft || 0) + (totalStats?.miss_ft || 0) }}
              </label>
              <label class="sub-label"> {{ totalStats.percent_ft || 0 }}% </label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.def_reb || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.off_reb || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{
                (totalStats?.off_reb || 0) + (totalStats?.def_reb || 0)
              }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.assist || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.steal || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.turnover || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.block || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.foul_committed || 0 }}</label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>
                {{
                  (totalStats?.points || 0) +
                    (totalStats?.off_reb || 0) +
                    (totalStats?.def_reb || 0) +
                    (totalStats?.assist || 0) +
                    (totalStats?.steal || 0) +
                    (totalStats?.block || 0) -
                    (totalStats?.miss_2pt || 0) -
                    (totalStats?.miss_3pt || 0) -
                    (totalStats?.miss_ft || 0) -
                    (totalStats?.turnover || 0)
                }}
              </label>
              <label class="sub-label"></label>
            </td>
            <td class="cell">
              <label>{{ totalStats?.points || 0 }}</label>
              <label class="sub-label"></label>
            </td>
          </tr>
      </tbody>
    </table>

Файл TS родительского компонента:

    export class StaffComponent extends StatProfileComponent implements OnChanges {
      @Input()
      coach: User

      @Output()
      editUser: EventEmitter<User> = new EventEmitter<User>()

      config: any;

      private calculateTotal$ = new BehaviorSubject<void>(null)

      constructor(
        protected service: ServiceRepository,
        protected cd: ChangeDetectorRef,
        protected actionSheet: ActionSheetController,
        protected modal: ModalController,
        protected toast: ToastController,
        protected alert: AlertController

      ) {
        super(service, cd, actionSheet, modal, toast)
        this.config = {
          itemsPerPage: 5,
          currentPage: 1,
          totalItems: this.games.size
        };
      }

      pageChanged(event){
        this.config.currentPage = event;
      }
    }

Я пытался поместить * ngFor в тег <tr>, но это только приводит к искажению таблицы. Есть идеи?