Сортировать все * ngFor по свойству во внутреннем * ngFor

Question

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

Это HTML-код, который я использую:

<table *ngIf="option == 'Document Type'">
  <tr>
    <th class="modalheader">Sources</th>
    <th class="modalheader">Systems</th>
  </tr>
  <table *ngFor="let doctype of doctypes | sort: 'source.Title'" style="width: 200%; margin-top: 0px;">
  <tr *ngFor="let source of doctype.Source;">
    <td style="width:50%;">{{source.Title}}</td>
    <td>
      {{doctype.System.Title}}
    </td>
  </tr>
  </table>
</table>

IПрикрепил пример с фактическими данными и мой канал, используемый для сортировки.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {

  transform(array: any[], field: string): any[] {
      array.sort((a: any, b: any) => {
        if (a[field] < b[field]) {
          return -1;
        } else if (a[field] > b[field]) {
          return 1;
        } else {
          return 0;
        }
      });
      return array;
    }

}

.modalheader {
  background-color: #00539B;
  color: white !important;
  padding-left: 5px;
  margin-bottom: 10px;
  /* REVIEW: ADDED FOR TABLE */
  font-size: 1.46em;
  font-weight: 300;
  width: 50%;
}

.docs {
  width: 99%;
  /* margin-top: 25px; */
  margin-top: 20px;
}

table {
  width: 100%;
  margin-top: 5px;
}

<table>
  <tr>
    <th class="modalheader">Sources</th>
    <th class="modalheader">Systems</th>
  </tr>
  <table style="width: 200%; margin-top: 0px;">
    <tr>
      <td style="width:25%;">Lafayette Savings Bank</td>
      <td>
        Nautilus
      </td>
    </tr>
  </table>
  <table style="width: 200%; margin-top: 0px;">
    <tr>
      <td style="width:25%;">United Bancorp</td>
      <td>
        Nautilus
      </td>
    </tr>
  </table>
  <table style="width: 200%; margin-top: 0px;">
    <tr>
      <td style="width:25%;">Old National</td>
      <td>
        FIS
      </td>
    </tr>
  </table>
</table>

Возможно ли это сделать, и если да, то как?