按内部* 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>

我附上了一个实际数据示例和用于排序的管道。

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>

这可能吗？如果可以，怎么做？