Question

我尝试向Angular6材质数据表应用程序显示一个复杂的json结构（从REST端点接收）。到目前为止，该方法仍然有效，但是我还尝试将分页和排序功能添加到我的应用程序中（根本没有成功）。

我尝试了所有发现的stackoverflow线程，但似乎没有给定的解决方案。可能是由于我错误地处理了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];
  }
};

Angular6排序问题|分页材料表

1 个答案: