Question

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

我不太确定这是在引用什么，而且我在网上找不到任何内容。

这是模板片段：

<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属性一直是我一直在排序的字段。

Answer 1

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

我曾期望prop内的内容代表我正在[mat-sort-header]=""数据块中排序的字段的对象路径，未显示，因为它很简单并且仅包含{{1} }。

为了获得预期的行为，所有*ngFor块都需要声明为字符串：

{{ field.paths }}

注意多余的[mat-sort-header]=""。这样一来，排序事件的日志记录就可以在单击各个字段名称时正确显示它们，而不是未定义。

现在记录器：

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

错误错误：必须为MatSortHeader提供唯一的ID

1 个答案: