时间戳

首页 > 解决方案 > 角材料标题

angular - 角材料标题

问题描述

如何允许角度材料中的重复标题值。

我有多个标题，这里的标题值是相同的。它给出了错误：-

提供了重复的列定义名称

标签： angularangular-material2

解决方案

如果您阅读此处的文档，您将看到以下内容：

@Input('matColumnDef') 名称：字符串

此列的唯一名称。

（强调我的）

我假设（因为您没有共享任何代码）您收到此错误的原因是因为您在显示的列数组中多次列出了相同的名称。

解决此问题的一种方法是创建新对象，其中包含属性/列名称以及用于 angular 内部使用的 uniqueIdentifier（在我的示例中，我将它们放在一个名为 的数组中columnObjects）

然后组件变为

export class TableBasicExample {

    // displayedColumns = ['position', 'name', 'name', 'weight', 'symbol'];
   dataSource = ELEMENT_DATA;

   columnObjects = [
       { columnId: 'position', propertyName: 'position' },
       { columnId: 'name1', propertyName: 'name' },
       { columnId: 'name2', propertyName: 'name' },
       { columnId: 'weight', propertyName: 'weight' },
       { columnId: 'symbol', propertyName: 'symbol' }
   ];

   columnIds = this.columnObjects.map(c => c.columnId);
}

并且可以在模板中使用，例如：

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <ng-container [matColumnDef]="col.columnId" *ngFor="let col of columnObjects">
      <mat-header-cell *matHeaderCellDef> {{ col.propertyName }} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element[col.propertyName] }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="columnIds"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnIds;"></mat-row>
  </mat-table>
</div>

请注意我是如何只传递columnIds到有角材料的内部的。这是因为这些是独一无二的。

我在这里创建了一个关于 stackblitz 的工作示例。

希望这很清楚。

推荐阅读