时间戳

首页 > 解决方案 > matSort 无法正常工作

angular - matSort 无法正常工作

问题描述

我在使用 mat-table 和排序数据时遇到问题，我找不到错误。

有一个stackblitz示例

https://stackblitz.com/edit/angular-lzhpvx

有人可以帮我看看错误吗？

标签： angularangular-materialangular-material2

解决方案

您的错误在于您的列模板和行模板键是大写的

displayedColumns = ['EMAIL','ID'];
                     ^^^^^^^^^^^^^
<ng-container matColumnDef="EMAIL">
                            ^^^^^^

而在你的数据数组键是小写的

const ELEMENT_DATA: TestEmail[] = [
  {email: 'test1@test.com', id:4},
  {email: 'aaaatest2@test.com', id: 7},
  {email: 'oootest3@test.com', id: 1}
];

将具有该列名称的字符串分配给该 matColumnDef指令。该指令使用键唯一标识给定列，它应该与为表提供数据的数据数组中定义的相同。

修改：

  displayedColumns = ['email','id'];

  <ng-container matColumnDef="email">
  <ng-container matColumnDef="id">

现场
演示 您提供的STACKBLITZ使用最新版本的 Angular Material V6，并且您已将其与 Material V5 混合

推荐阅读