排序的Angular6问题|分页材料表

Question

我尝试将一个复杂的json结构(从REST端点接收)显示到我的Angular6材料数据表应用程序。到目前为止，这是可行的，但我也尝试在我的应用程序中包含分页和排序(根本没有成功)。

我尝试了我找到的所有堆栈溢出线程，但似乎没有一个给定的解决方案有效。也许问题是因为我错误地处理了REST数据(虽然我可以访问构造器中的数据)，但我找不到问题所在。未显示任何错误消息。所有的导入都应该是正常的。

文件: employee-list.ts

import { MatSort } from '@angular/material/sort';
import { MatTableDataSource, MatPaginator } from '@angular/material';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Entry } from '../../interfaces/entry';


@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  typesafeEntries: Entry[];
  listData: MatTableDataSource<Entry>;
  displayedColumns: string[] = ['searched', 'german', 'dialectEntry', 'partOfSpeech', 'linguisticUsage', 'synonyms', 'actions'];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;


  constructor(private userService: UserService) {

    this.userService.getCompleteSearchResults("SomeLanguageData1", "SomeLanguageData2", "wordToLookFor")
      .subscribe((resp: Entry[]) => {;

        this.typesafeEntries = resp;
        this.listData = new MatTableDataSource<Entry>(this.typesafeEntries);
        this.listData.sort = this.sort;

      });
  }

  ngOnInit() {  }

}

<div class="mat-elevation-z8">
  <mat-table [dataSource]="listData" matSort>
    <ng-container matColumnDef="searched">
     // some code
    </ng-container>


    <ng-container matColumnDef="german">
    // some code
    </ng-container>

    <!-- neue spalte: -->
    <ng-container matColumnDef="dialectEntry">
      <mat-header-cell *matHeaderCellDef mat-sort-header>       // e.g. this table should become sorted.
        Dialekt B
      </mat-header-cell>
      <mat-cell *matCellDef="let element">{{
        element.dialectB.dialectEntry
      }}</mat-cell>
    </ng-container>






    //from here on the code should no longer be important for the solution
     //...

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    <!-- loading screen -->
    <mat-footer-row
      *matFooterRowDef="['loading']"
      [ngClass]="{ hide: listData != null }"
    ></mat-footer-row>
    <mat-footer-row
      *matFooterRowDef="['noData']"
      [ngClass]="{ hide: !(listData != null && listData.data.length == 0) }"
    ></mat-footer-row>
    <!-- <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(true == false)}"></mat-footer-row> -->
  </mat-table>

  <mat-paginator
    [pageSizeOptions]="[1, 3, 5, 10]"
    [pageSize]="5"
  ></mat-paginator>
</div>

消耗的JSON：

[
    {
        "dialectA": {
            "dialectId": "5d1220343269a28de043eda9",
            "dialectEntry": "House",
            "dialectEntryLowerCase": "house",
            "partOfSpeech": {
                "partOfSpeechs": [
                    "INTERJECTION",
                    "ARTICLE"
                ]
            },
            "linguisticUsage": {
                "linguisticUsages": [
                    "ACAD",
                    "SCIENCE"
                ]
            },
            "refToGermanId": "5d1220053269a28de043eda3",
            "synonymIds": []
        },
        "german": {
            "germanId": "5d1220053269a28de043eda3",
            "germanEntry": "Haus",
            "germanEntryLowerCase": "haus",
            "reverseTranslations": [
                {
                    "reverseGerman2DialectLanguage": "dornbirnerisch",
                    "reverseGerman2DialectIdList": [
                        "5d1220343269a28de043eda9"
                    ]
                },
                {
                    "reverseGerman2DialectLanguage": "tirolerisch",
                    "reverseGerman2DialectIdList": [
                        "5d1221893269a28de043edaf"
                    ]
                }
            ]
        },
        "dialectB": {
            "dialectId": "5d1221893269a28de043edaf",
            "dialectEntry": "person",
            "dialectEntryLowerCase": "person",
            "partOfSpeech": {
                "partOfSpeechs": [
                    "INTERJECTION",
                    "ARTICLE"
                ]
            },
            "linguisticUsage": {
                "linguisticUsages": [
                    "ACAD",
                    "SCIENCE"
                ]
            },
            "refToGermanId": "5d1220053269a28de043eda3",
            "synonymIds": []
        }
    },
// end of first entry
{...}, {...} ]

预期结果:单击排序时，应对该列的内容进行排序。分页也是如此。

这里有一个屏幕截图：screenshot from project

Answer 1

对该列进行排序不起作用，因为Angular Material试图根据列名(在本例中为dialectEntry)对表数据进行排序，但该列的实际数据嵌套在另一个属性element.dialectB.dialectEntry中。因此，Angular Material正在查找element.dialectEntry下的数据，但由于它不在那里，因此排序不起作用。

在这种情况下，您需要编写自己的sortingDataAccessor，并告诉Angular Material在哪里查找数据。请参阅sortingDataAccessor的文档here。

对于您的情况，如下所示：

this.listData.sortingDataAccessor = (item, property) => {
  if (property === 'dialectEntry') {
    return item.dialectB.dialectEntry;
  } else {
    return item[property];
  }
};