提供了重复的列名：角材料数据表

Posted 2023-03-13

【中文标题】提供了重复的列名：角材料数据表

【英文标题】：Duplicate Column Name Provided: Angular Material Data Table

【发布时间】：2020-05-11 01:19:17

【问题描述】：

由于某种原因，我在为我的数据表创建复选框列时遇到错误。

我了解控制台中的错误，但我能做些什么来修复它？

view.component.html

<mat-card-content>
<div class="view-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let action">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </td>
    </ng-container>

    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
         column 
        <mat-icon aria-hidden="false" aria-label="filter icon">more_horiz</mat-icon>
      </th>
      <td mat-cell *matCellDef="let action"> action[column] 
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
</div>

view.component.ts

displayedColumns: string[] = [];

const displayedColumns = this.viewData.Columns.map((c:  Name: any; ) => c.Name);
    displayedColumns[2] = 'Folder1';
    this.displayedColumns = displayedColumns;
    // tslint:disable-next-line: max-line-length
    const fetchedData = this.viewData.DataRows.map((r:  slice: (arg0: number, arg1: number) =>  forEach: (arg0: (d: any, i: string | number) => any) => void; ; ) => 
      const row = ;
      r.slice(0, 9).forEach((d: any, i: string | number) => (row[this.displayedColumns[i]] = d));
      return row;
    );

【问题讨论】：

您必须向我们展示您的专栏。您可以发布显示的列吗？那是重复的地方。确保集合包含唯一值。

displayedColumns posted..

"displayedColumns" 必须以其中的重复值结束。你可以试试这个记录内容吗？ console.log(JSON.stringify(displayedColumns || []));

我收到“错误错误：提供的列定义名称重复：“列”。错误，但我相信这与 html ng-containers 有关。我想要做的只是为一行添加一个复选框

您需要每列的复选框还是每行只需要一个复选框？

【参考方案1】：

您收到错误是因为您在 displayedColumns 上循环了两次。

为了修复错误，您需要：

修正“选择”列的定义 从 displayedColumns 中排除您选择的列 ID，以防止多次使用它 在行定义的 id 列表中包含选择列 id

选择列

<ng-container matColumnDef="select">
   <!-- ... -->
</ng-container>

如果您只想显示一个选择列，每行都有一个复选框，则需要在此处删除 *ngFor="..."。 如果您想要多个选择列（例如，每个数据列一个），您需要为这些列定义一个唯一 ID 列表并遍历它们：

<ng-container matColumnDef="select_col" *ngFor="let col of dataColumns">
   <!-- e.g. dataColumns = ["id", "col1", "col2"]; 
        would result in select_id, select_col1, select_col2 -->
   <!-- ... -->
</ng-container>

其他栏目

<ng-container [matColumnDef]="column" *ngFor="let column of dataColumns">
   <!-- ... -->
</ng-container>

将displayedColumns 替换为包含所有列ID的列表不包括选择列的ID。

行

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

最后使用列 id 列表，其中包含您的数据列 id 以及选择列的 id

看看这个Stackblitz，我在其中添加了一个和多个选择列的示例。 （注意：我没有调整多选列示例的选择逻辑..）

【参考方案2】：

我认为您的问题是您在displayedColumns 中多次使用每个值matColumnDef 首先在这里：

...
    <ng-container matColumnDef="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
...

那么这里：

...
   <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
         column 
        <mat-icon aria-hidden="false" aria-label="filter icon">more_horiz</mat-icon>
      </th>
      <td mat-cell *matCellDef="let action"> action[column] 
      </td>
    </ng-container>
...

事实上，如果您需要每行一个复选框，则无需为每个displayedColumns 创建一个mat-checkbox。

这里我们有 Angular Material 的例子： https://material.angular.io/components/table/overview#selection

因此，您应该进行以下更改：

1) 将select 列添加到displayedColumns：

view.component.ts

displayedColumns: string[] = [];

const displayedColumns = this.viewData.Columns.map((c:  Name: any; ) => c.Name);
    displayedColumns[2] = 'Folder1';
    this.displayedColumns = ['select'].concat(displayedColumns);
    // tslint:disable-next-line: max-line-length
    const fetchedData = this.viewData.DataRows.map((r:  slice: (arg0: number, arg1: number) =>  forEach: (arg0: (d: any, i: string | number) => any) => void; ; ) => 
      const row = ;
      r.slice(0, 9).forEach((d: any, i: string | number) => (row[this.displayedColumns[i]] = d));
      return row;
    );

2) 第一列（复选框）应为select，并且不应包含在其他列的*ngFor 中：

view.component.html

<mat-card-content>
<div class="view-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </td>
    </ng-container>

    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns | slice:1 ">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
         column 
        <mat-icon aria-hidden="false" aria-label="filter icon">more_horiz</mat-icon>
      </th>
      <td mat-cell *matCellDef="let action"> action[column] 
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
</div>

现在它应该可以按预期工作了。

【讨论】：

我没有测试过你的解决方案，但是只要显示列的顺序没有改变，使用静态值切片 displayedColumns 就可以了。对于更通用的方法，最好将静态列和可能的动态列分开。

你是对的。但是，为了防止你提到的问题，这就是我这样做的原因：view.component.ts 中的['select'].concat(displayedColumns)，所以你要确保第一个元素（索引 0）始终是 select 列.