Как добиться разбивки на страницы и сортировки для объекта из ответа api в angular?

Question

У меня есть объект из ответа API, который представляет собой пару случайных значений ключа.

{
name1:value1;
name2:value2;
......
}

Как добавить для этого разбиение на страницы? Думаю, здесь нельзя использовать mat-paginator и mat-sort. Я пробовал использовать класс PageEvent. Но это не то, что я ищу.

До сих пор я делал это app.component.ts:

export class AppComponent implements OnInit{
  displayedColumns=['key','value'];
  initialDataSource={};
  lowValue: number = 0;
  highValue: number = 20;
  length:number;
  pageIndex:number;
  pageSize:number;

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

  RenderDataTable() {  
    this.apiService.GetAllRecords().subscribe((res) => {
     console.log(res);
    this.initialDataSource=new MatTableDataSource();
    this.initialDataSource=res;
    console.log(this.initialDataSource);
  });  
} 
  constructor(public apiService:ApiService, public http: HttpClient){

  }
  applyFilter(event: Event){
    .......    
  }
  public getPaginatorData(event: PageEvent): PageEvent {
    this.lowValue = event.pageIndex * event.pageSize;
    this.highValue = this.lowValue + event.pageSize;
    return event;
  }
  public refreshlist=()=>{
    window.location.reload();
  }
  ngOnInit(){
   this.RenderDataTable();

  } 
}

app.component. html:

<table mat-table matSort [dataSource]="dataSource | keyvalue | 
slice: lowValue : highValue"  >

  <ng-container matColumnDef="key">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Key </th>
    <td mat-cell *matCellDef="let element"> {{element.key}} </td>
  </ng-container>

  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator 
[length]="length"
pageSize=5
(page)="getPaginatorData($event)"
[pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons="false">
</mat-paginator>

api.service.ts:

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private headers = new Headers({ 'Content-Type': 'application/json' });  
  _baseUrl: string = '';  
  constructor(private http:HttpClient) {
    this._baseUrl = "https://beta.randomapi.com/api/3141b5683af0edf576dabdb50ef1ff64?fmt=prettyraw&sole"; 
   }
   public GetAllRecords() {  
    return this.http.get(this._baseUrl);  
  }  
}

Теперь эта проблема решена .... Спасибо