Javascript 除非单击“排序”按钮，否则不会渲染角度材质数据表

我试图从远程服务器获取数据，并将其呈现在角度材质数据表中

我使用以下命令生成了一个数据表组件：

ng generate@angular/material:table test

具体来说，这个命令创建了五个文件：

test datasource.ts

，

test component.css

，

test component.html

，

test component.ts

，以及

test.component.spec.ts

我修改了

testdatasource.ts

中的一行，使其从API服务器中提取数据，而不是预先生成的虚拟数组

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// TODO: Replace this with your own data model type
export interface TestItem {
  name: string;
  id: number;
}

// TODO: replace this with real data from your application


/**
 * Data source for the Test view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class TestDataSource extends DataSource<TestItem> {
  data: TestItem[] = [];
  paginator: MatPaginator;
  sort: MatSort;

  constructor(private http_service: HttpClient) {
    super();
  }

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<TestItem[]> {
    /***** I CALL MY EXTERNAL API HERE *****/
    this.http_service.get<any>(`/api/test`).subscribe(
      data => this.data = data)
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }

  /**
   *  Called when the table is being destroyed. Use this function, to clean up
   * any open connections or free any held resources that were set up during connect.
   */
  disconnect() {}

  /**
   * Paginate the data (client-side). If you're using server-side pagination,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getPagedData(data: TestItem[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }

  /**
   * Sort the data (client-side). If you're using server-side sorting,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getSortedData(data: TestItem[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'id': return compare(+a.id, +b.id, isAsc);
        default: return 0;
      }
    });
  }
}

/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
function compare(a: string | number, b: string | number, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

从'@angular/cdk/collections'导入{DataSource}；
从'@angular/material/paginator'导入{MatPaginator}；
从'@angular/material/sort'导入{MatSort}；
从“rxjs/operators”导入{map}；
从“rxjs”导入{observeable，of as observeof，merge}；
从'@angular/common/http'导入{HttpClient}；
//TODO:将其替换为您自己的数据模型类型
导出接口测试项{
名称：字符串；
id：编号；
}
//TODO:将其替换为应用程序中的真实数据
/**
*测试视图的数据源。这个班应该
*封装用于获取和操作显示数据的所有逻辑
*（包括排序、分页和筛选）。
*/
导出类TestDataSource扩展了DataSource{
数据：TestItem[]=[]；
paginator:MatPaginator；
排序：MatSort；
构造函数（专用http_服务：HttpClient）{
超级（）；
}
/**
*将此数据源连接到表。仅当
*返回的流发出新项。
*@返回要呈现的项目流。
*/
connect（）：可观察{
/*****我在这里调用我的外部API*****/
此.http_服务.get（`/api/test`）.订阅(
data=>this.data=data）
//将影响渲染数据的所有内容合并到一个更新中
//要使用的数据表的流。
常数数据突变=[
（此数据）的可观察性，
这个.paginator.page，
this.sort.sortChange
];
返回合并（…数据突变）.pipe（映射（（）=>{
返回this.getPagedData（this.getSortedData（[…this.data]）；
}));
}
/**
*在销毁表时调用。使用此函数清理
*任何打开的连接或释放在连接期间设置的任何保留资源。
*/
断开连接（）{}
/**
*对数据进行分页（客户端）。如果使用服务器端分页，
*这将通过从服务器请求适当的数据来代替。
*/
私有getPagedData（数据：TestItem[]）{
const startIndex=this.paginator.pageIndex*this.paginator.pageSize；
返回data.splice（startIndex，this.paginator.pageSize）；
}
/**
*对数据进行排序（客户端）。如果使用服务器端排序，
*这将通过从服务器请求适当的数据来代替。
*/
私有getSortedData（数据：TestItem[]{
如果（！this.sort.active | | this.sort.direction==“”）{
返回数据；
}
返回数据。排序（（a，b）=>{
const isAsc=this.sort.direction=='asc'；
开关（this.sort.active）{
案例“name”：返回比较（a.name、b.name、isAsc）；
案例“id”：返回比较（+a.id、+b.id、isAsc）；
默认值：返回0；
}
});
}
}
/**简单排序比较器，例如ID/Name列（用于客户端排序）*/
函数比较（a:string | number，b:string | number，isAsc:boolean）{
回报率（a

但是，除非我显式单击表标题中的排序按钮，否则表将不再呈现。我如何解决这个问题