角材料头

Question

如何在角形材质中允许重复的标题值。

我有多个标头，此处标头值相同。它给出了错误：

提供了重复的列定义名称

Answer 1

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

@Input（'matColumnDef'）名称：字符串

此列的唯一名称。

（强调我的）

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

解决此问题的一种方法是创建一个新对象，其中包含属性/列的名称以及用于内部使用的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的工作示例。

希望这很清楚。