Angular 排序|分页物料表的角度6问题

我尝试向Angular6 material data table应用程序显示一个复杂的json结构（从REST端点接收）。 到目前为止，这是可行的，但我也尝试将分页和排序包含到我的应用程序中（根本没有成功）

我尝试了我发现的所有stackoverflow线程，但似乎没有一个给定的解决方案有效。可能是因为我错误地处理了其余数据（虽然我可以访问Constructor中的数据），但我没有发现问题。不会显示任何错误消息。所有进口产品都应该可以

文件：employee-list.ts

从'@angular/material/sort'导入{MatSort}；
从“@angular/material”导入{MatTableDataSource，MatPaginator}；
从“@angular/core”导入{Component，OnInit，ViewChild}；
从“../../services/user.service”导入{UserService}；
从“../../interfaces/Entry”导入{Entry}；
@组成部分({
选择器：“应用程序员工列表”，
templateUrl:“./employee list.component.html”，
样式URL:['./员工列表.component.css']
})
导出类EmployeeListComponent实现OnInit{
typesafeEntries:条目[]；
listData:MatTableDataSource；
显示的列：字符串[]=['searched'、'德语'、'方言条目'、'语音部分'、'语言用法'、'同义词'、'动作']；
@ViewChild（MatSort）排序：MatSort；
@ViewChild（MatPaginator）分页器：MatPaginator；
构造函数（私有用户服务：用户服务）{
this.userService.getCompleteSearchResults（“SomeLanguageData1”、“SomeLanguageData2”、“wordToLookFor”）
.subscribe（（resp:Entry[]）=>{；
this.typesafeEntries=resp；
this.listData=新MatTableDataSource（this.typesafeEntries）；
this.listData.sort=this.sort；
});
}
ngOnInit（）{}
}

//一些代码
//一些代码
//这个表格应该被分类。
Dialekt B
{{
元素。方言
}}
//从这里开始，代码对于解决方案不再重要
//...

使用的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
{...}, {...} ]

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

---

这里是一个屏幕截图：

对该列进行排序不起作用，因为Angular Material正试图根据列名（在本例中为

方言条目

）对表格数据进行排序，但该列的实际数据嵌套在另一个属性

元素中。方言B.方言条目

。因此Angular Material正在

元素.Entry

下查找数据，但由于它不在那里，因此排序不起作用

在这种情况下，您需要编写自己的

sortingDataAccessor

，并告诉AngleMaterial在哪里查找数据。请参阅

排序数据访问器的文档

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

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

对该列进行排序不起作用，因为Angular Material正在尝试根据列名（在本例中为
方言条目
）对表格数据进行排序，但该列的实际数据嵌套在另一个属性
元素中。方言B.方言条目
。因此Angular Material正在
元素.Entry
下查找数据，但由于它不在那里，因此排序不起作用

在这种情况下，您需要编写自己的
sortingDataAccessor
，并告诉AngleMaterial在哪里查找数据。请参阅
排序数据访问器的文档

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

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

非常感谢你！这对我有用！您知道如何解决分页问题吗？-同样的方法？您的paginator没有链接到数据源，添加this
this.listData.paginator=this.paginatorthis.listData.paginator=this.paginator