嵌套表对 Angular 进行排序是否存在一般问题？

问题描述

如果我只有一个数据表，我可以正确地对所有值进行排序。但有时我有嵌套表。例如，用户可以在表上选择城市，之后（城市有很多位置）位置显示，用户可以在第二个表上选择位置之一。之后（位置有很多房子）用户可以选择第三张桌子上的房子之一。因此，有时我必须向用户嵌套表显示。我希望用户可以正确地对门牌号或门牌颜色等进行排序。但是排序不起作用。我检查了 matColumnDef 和 matCellDef 一些词。 （ matColumnDef="name" 和 *matCellDef="let element"> {{element.name}} ）所有值都正确显示，所以实际上表格工作得很好。只有表格排序不起作用。在不同的页面上（只有一张像用户一样的表）排序效果很好。有人可以帮我吗？

初始化：

export class ListComponent implements OnInit {
nestedZoneTableData = new MatTableDataSource<any>();
senderDevicesData = new MatTableDataSource<any>();
devicesData = new MatTableDataSource<any>();
}

AfterViewInit:

ngAfterViewInit() {

this.nestedZoneTableData.sortingDataAccessor = (
  data,sortHeaderId
): string => {
  return data[sortHeaderId];
};
this.nestedZoneTableData.sort = this.zsorter;

this.senderDevicesData.sortingDataAccessor = (
  data,sortHeaderId
): string => {
  return data[sortHeaderId];
};
this.senderDevicesData.sort = this.sdsorter;

this.devicesData.sortingDataAccessor = (data,sortHeaderId): string => {
  return data[sortHeaderId];
};
this.devicesData.sort = this.dsorter;

}

HTML 太长，所以我只能显示一小部分。：

      <table mat-table style="background-color: pink;" [dataSource]="senderDevicesData" matSortActive="description" matSortDirection="asc"
                  matSort matSortdisableClear multiTemplateDaTarows #sdsorter="matSort"
                  class=" deneme col-md-12 mat-elevation-z8">
                  <ng-container matColumnDef="activeFlag">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header="activeFlag"></th>
                    <td mat-cell *matCellDef="let element"></td>
                  </ng-container>
                  <ng-container matColumnDef="legacyOctogateSerialnumber">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header="legacyOctogateSerialnumber">
                      {{'i18n-sender-serial_number' | translate}}
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.legacyOctogateSerialnumber}} </td>
                  </ng-container> 


...
      <table style = "background-color: yellow;" mat-table [dataSource]="devicesData" matSortActive="name" matSortDirection="asc"
                              matSort matSortdisableClear multiTemplateDaTarows #dsorter="matSort"
                              class="col-md-12 mat-elevation-z8">
<ng-container matColumnDef="mChannel">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="mChannel">
                                  {{'i18n-sender-m_channel' | translate}}
                                </th>
                                <td mat-cell *matCellDef="let element"> {{element.mChannel}} </td>
                              </ng-container>
 <ng-container matColumnDef="mSlaveAddress">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="mSlaveAddress">
                                  {{'i18n-sender-m_slave_address' | translate}}
                                </th>
                                <td mat-cell *matCellDef="let element"> {{element.mSlaveAddress}} </td>
                              </ng-container>
...

解决方法

在这里你会找到所有你可以使用的排序包和api

对嵌套表进行排序，您可以使用 angular 文档中的 sortingDataAccessor 您可以参考以下文档以获取更多信息

https://github.com/angular/components/issues/15888

getProperty = (obj,path) => (
  path.split('.').reduce((o,p) => o && o[p],obj)
)

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (obj,property) => this.getProperty(obj,property);
  this.dataSource.sort = sort;
}

columnDefs = [
  {name: 'project.name',title: 'Project Name'},{name: 'position',title: 'Position'},{name: 'name',title: 'Name'},{name: 'test',title: 'Test'},{name: 'symbol',title: 'Symbol'}
];

并且在 html 中，您可以使用 jinga 语法调用 告诉我上面的代码是否适合你