如何从angular中的api响应中实现对象的分页和排序？

我有一个来自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>

---

此问题现已解决…谢谢

用户可以对列进行排序吗？他能用过滤器吗？您是否计划在将来实现这些功能？是的，用户应该能够对列进行排序并使用过滤器。但是在这种情况下，我如何实现排序和分页功能呢？在这种情况下更复杂。你似乎已经找到了正确的图书馆来做这件事，那么你的问题到底是什么？你不能让它们工作吗？出了什么问题？是的，我不能让它们工作…所以我尝试了别的方法。但那不是我想要的。用户必须能够对行进行排序..并且在用户与paginator组件交互之前分页不起作用，因为我在其中使用了一个事件..用户可以对列进行排序吗？他能用过滤器吗？您是否计划在将来实现这些功能？是的，用户应该能够对列进行排序并使用过滤器。但是在这种情况下，我如何实现排序和分页功能呢？在这种情况下更复杂。你似乎已经找到了正确的图书馆来做这件事，那么你的问题到底是什么？你不能让它们工作吗？出了什么问题？是的，我不能让它们工作…所以我尝试了别的方法。但那不是我想要的。用户必须能够对行进行排序。并且，在用户与paginator组件交互之前，分页不起作用，因为我在其中使用了一个事件。。

@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);  
  }  
}