Angular 7 - Как избежать перестановки строк с помощью ng-контейнера

Question

Согласно stackblitz tbody содержит информацию, которая будет отображаться в двух tr. Я реализовал это поведение с помощью магического ng-контейнера, как показано ниже:

<tbody>
    <ng-container *ngFor="let hero of heroes">
  <tr>
    <td>{{hero.name}}</td>
    <td>{{hero.id}}</td>
    <td>{{hero.gender}}</td>
    <td>{{hero.name}}</td>
    <td>{{hero.id}}</td>
    <td>{{hero.gender}}</td>
    <td>{{hero.name}}</td>
    <td>{{hero.id}}</td>
    <td>{{hero.gender}}</td>
    <td>{{hero.name}}</td>
    <td>{{hero.id}}</td>
    <td>{{hero.gender}}</td>
    <td>{{hero.name}}</td>
    <td>{{hero.id}}</td>
    <td>{{hero.gender}}</td>
      </tr>
  <tr *ngIf='hero'>
    <td colspan="15" style="text-align: center">{{'Strength: '+ hero.strength}}</td>
  </tr>
    </ng-container>
</tbody>

Примечание: пожалуйста, игнорируйте отображение дубликатов столбцов

Проблема иногда возникает при отображении отфильтрованных записей при выборе «Показать четные записи» вместо строки с Имя, Идентификатор, Пол , отображаемый первым; сила отображается сначала время от времени время от времени. Фильтрация записей происходит с использованием массивов Spread.

Мне не удалось выяснить проблему, вызывающую такое поведение, но с сомнением я добавил * ngIf для 2nd tr . Не могли бы вы помочь в устранении этой неустойчивой проблемы?

Благодарим вас за помощь в Advance !!