带列表的Angular 7材质选项卡控件

我有最新版本的Angular和最新版本的material component。 我尝试渲染选项卡控件内部的表。但是，我无法装载排序操作。请帮忙。代码如下： 视图：

仅活动
搜寻
类别
{{element.name}

组成部分：

export class CategoriesListComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['name', 'delete', 'edit'];
  dataSource: ResultsList<CategoryModel>;

  systemCategories: SystemCategoryModel[];
  sysCategoryId: number;
  isActive = true;
  keyword: '';

  @ViewChild(MatSort) sort: MatSort = new MatSort();

  constructor(private systemCategoriesService: DictionaryService, private categoriesService: CategoriesService) { }

  ngOnInit() {
    this.systemCategoriesService.getDictionary<SystemCategoryModel>(SystemCategoriesUrl)
      .subscribe(v => { this.systemCategories = v; });
  }

  ngAfterViewInit() {
    // S.O.S it doesnt work here for sure!
    // this.sort.sortChange.subscribe(() => this.loadGrid());
  }

  onTabChange(tabChangeEvent: MatTabChangeEvent) {
    this.sysCategoryId = this.systemCategories[tabChangeEvent.index].id;
    this.loadGrid();
  }

  loadGrid() {
    const query = this.createQuery();
    this.categoriesService.load(query).subscribe(v => this.dataSource = v);
  }

  private createQuery(): CategoriesSearchQuery {
    return {
      isActive: this.isActive,
      keyword: this.keyword,
      pageIndex: 0,
      pageSize: 1000,
      sortField: this.sort && this.sort.active || 'name',
      isDesc: this.sort && this.sort.direction === 'desc' || false,
      systemCategoryId: this.sysCategoryId
    };
  }

导出类CategoriesListComponent实现OnInit，AfterViewInit{
displayedColumns:string[]=['name'，'delete'，'edit']；
数据源：结果列表；
系统类别：SystemCategoryModel[]；
sysCategoryId：编号；
isActive=true；
关键词：''；
@ViewChild（MatSort）排序：MatSort=新MatSort（）；
构造函数（私有系统分类服务：字典服务，私有分类服务：分类服务）{}
恩戈尼尼特（）{
this.systemCategoriesService.getDictionary（SystemCategoriesUrl）
.subscribe（v=>{this.systemCategories=v；}）；
}
ngAfterViewInit（）{
//S.O.S这里肯定不行！
//this.sort.sortChange.subscribe（（）=>this.loadGrid（））；
}
onTabChange（TABCHANGEVENT:MATTABCHANGEVENT）{
this.sysCategoryId=this.systemCategories[tabChangeEvent.index].id；
这是loadGrid（）；
}
loadGrid（）{
const query=this.createQuery（）；
this.categoriesService.load（query.subscribe）（v=>this.dataSource=v）；
}
私有createQuery（）：CategoriesArchQuery{
返回{
isActive:this.isActive，
关键词：this.keyword，
页面索引：0，
页面大小：1000，
sortField:this.sort&&this.sort.active | | |“name”，
isDesc:this.sort&&this.sort.direction==='desc'| | false，
systemCategoryId:this.sysCategoryId
};
}

将此

@ViewChild（MatSort）排序：MatSort=new MatSort（）；

更改为简单的

@ViewChild（MatSort）排序：MatSort；

此外，您需要将

MatSort

分配给数据源，如下所示：

this.datasource.sort=this.sort；

，这通常在

ngOnInit（）中完成

有关更多信息，请查看官方网站，
下面是一个带有筛选的表的示例，它应该涵盖您的
需要

如果您在多个选项卡上有多个表和数据源，我建议您将它们分开，不要重复使用同一个数据源和
MatSort
，因为这将提供一些奇怪的行为。我将按当前选项卡对数据进行索引，然后相应地显示数据源

我做了一个快速而肮脏的stackblitz来显示这可能是什么样子。
可能是这样：
this.dataSource.sort=this.sort
在将数据列表分配到Datasoruce@PrashantPimpale是的，当然。但是…之前如何添加它？你能提供StackBlitz吗？我会尝试，但似乎有问题。需要花费1-2-3个小时才能安装一切都在那里。唉。它不起作用。正如你所发现的，首先我更新了选项卡，然后我更新了选项卡主体。请。不要把我发送到角度示例。我在那里。这就是我在StackOverflow中发布的原因。是的，另外。无论是this.dataSource.sort还是this.dataSource.items.sort都没有任何“sort”属性，因为你是不使用角度材料文档中所述的
MatTableDataSource
。可能再看一次文档。是的，您的示例似乎是一个解决方案。我稍后再试，当然会通知您。谢谢，Fabian
export class CategoriesListComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['name', 'delete', 'edit'];
  dataSource: ResultsList<CategoryModel>;

  systemCategories: SystemCategoryModel[];
  sysCategoryId: number;
  isActive = true;
  keyword: '';

  @ViewChild(MatSort) sort: MatSort = new MatSort();

  constructor(private systemCategoriesService: DictionaryService, private categoriesService: CategoriesService) { }

  ngOnInit() {
    this.systemCategoriesService.getDictionary<SystemCategoryModel>(SystemCategoriesUrl)
      .subscribe(v => { this.systemCategories = v; });
  }

  ngAfterViewInit() {
    // S.O.S it doesnt work here for sure!
    // this.sort.sortChange.subscribe(() => this.loadGrid());
  }

  onTabChange(tabChangeEvent: MatTabChangeEvent) {
    this.sysCategoryId = this.systemCategories[tabChangeEvent.index].id;
    this.loadGrid();
  }

  loadGrid() {
    const query = this.createQuery();
    this.categoriesService.load(query).subscribe(v => this.dataSource = v);
  }

  private createQuery(): CategoriesSearchQuery {
    return {
      isActive: this.isActive,
      keyword: this.keyword,
      pageIndex: 0,
      pageSize: 1000,
      sortField: this.sort && this.sort.active || 'name',
      isDesc: this.sort && this.sort.direction === 'desc' || false,
      systemCategoryId: this.sysCategoryId
    };
  }