ERROR 错误：必须为 MatSortHeader 提供唯一 ID答案

【问题标题】：ERROR Error: MatSortHeader must be provided with a unique idERROR 错误：必须为 MatSortHeader 提供唯一 ID
【发布时间】：2020-01-03 15:48:34
【问题描述】：

我正在尝试实现一些 Angular 材料排序，但是我收到错误消息，告诉我必须为每个 mat 排序标头提供一个唯一的 ID。

我不太确定这是指什么，我在网上找不到任何关于此的内容。

这是模板 sn-p：

<div class="headers"
     matSort
     (matSortChange)="sortDocuments($event)">
  <span class="col-3">
    <label id="file-name-header"
           class="header" 
           [mat-sort-header]="documentsList?.model?.fileParts[0]?.meta?.name">File Name</label>
  </span>
  <span class="col-2">
    <label id="file-type-header"
           class="header"
           [mat-sort-header]="documentsList?.model?.type">File Type</label>
  </span>
  <span class="col-3">
    <label id="user-header"
           class="header"
           [mat-sort-header]="documentsList?.model?.user">User</label>
  </span>
  <span class="col-2">
    <label id="file-size-header"
           class="header"
           [mat-sort-header]="documentsList?.model?.fileParts[0]?.meta?.size">File Size</label>
  </span>
  <span class="col-1">
    <label id="date-header"
           class="header"
           [mat-sort-header]="documentsList?.model?.fileParts[0]?.createdDate">Created Date</label>
  </span>
</div>

MatSortModule 是在模块中导入的，此刻的组件代码基本上很琐碎。

我正在尝试仅记录我从标题中捕获的排序事件：

public sortDocuments(sort: Sort) {
    console.log('sort event: %o', sort);
}

奇怪的是，单击可排序的标题会记录以下内容：

sort event: {active: undefined, direction: "asc"}，而在过去，active 属性一直是我排序的字段。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

好吧，这是一个愚蠢的错误，但我认为住在这里很有价值：

我曾期望[mat-sort-header]="" 中的内容代表我在我的*ngFor 数据块中排序的字段的对象路径，因为它是微不足道的并且只包含{{ field.paths }}，所以没有显示。

为了获得预期的行为，所有[mat-sort-header]="" 块都需要声明为字符串：

[mat-sort-header]="'documentsList.model.type'">

注意额外的'。这样做允许排序事件的日志记录在单击时正确显示各种字段名称，而不是未定义。

现在记录：

sort event: {active: "documentsList.model.type", direction: "asc"}

【讨论】：