Mat-Sort Работает на несколько столбцов, а не на каждый столбец

Question

У меня есть mat-таблица с mat-sort и mat-paginator. Кажется, сортировка матов работает с колонками дат (coulmn в mat-таблице), но если я хочу отсортировать данные по стране (это одна из столбцы) это не работает. Может кто-нибудь помочь мне разобраться в чем проблема. Почему сортировка матов работает для одного столбца и не работает для другого.

HTML Код:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    ​
        <ng-container matColumnDef="country">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Country</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngFor="let property of element.properties">
              <span *ngIf="property.key == 'country'">
                {{ property.value }}
              </span>
            </ng-container>
            <!-- {{ element.properties[0].value}} -->
          </td>
        </ng-container>
        ​
        <ng-container matColumnDef="source">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Source</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngFor="let property of element.properties">

              <span *ngIf="property.key == 'Source'">
                {{ property.value }}
              </span>
            </ng-container>

          </td>
        </ng-container>

        <ng-container matColumnDef="destination">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Destination</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngFor="let property of element.properties">

              <span *ngIf="property.key == 'Destination'">
                {{ property.value }}
              </span>
            </ng-container>
          </td>
        </ng-container>

        <ng-container matColumnDef="jobCreatedDate">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Job Create Date</th>
          <td mat-cell *matCellDef="let element">{{ element.jobCreatedDate }}</td>
        </ng-container>

        <ng-container matColumnDef="jobLastRunDate">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Run Date</th>
          <td mat-cell *matCellDef="let element">{{ element.jobLastRunDate }}</td>
        </ng-container>

        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngFor="let property of element.properties">

              <span *ngIf="property.key == 'scheduleType'">
                {{ property.value }}
              </span>
            </ng-container>

          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>

Код машинописного текста:

displayedColumns: string[] = [
    'country',
    'sourcesystem',
    'sourcetable',
    'source',
    'destination',
    'jobCreatedDate',
    'jobLastRunDate',
    'type',
    'active',
    'toggle',
    'action'
  ];
  dataSource: any;
  JOBMANAGEMENT_DATAAPI: any = [];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

// API для извлечения данных таблицы матов

getalljobs() {
    this.historyServcice.getAllJobs().subscribe(
      data => {

        this.JOBMANAGEMENT_DATAAPI = data;
        // For API
        this.dataSource = new MatTableDataSource<JobManagementElement>(this.JOBMANAGEMENT_DATAAPI);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      error => {
        console.log('Could not call API.');
      }
    );
  }