时间戳

首页 > 解决方案 > 提供了重复的列名：角材料数据表

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

问题描述

出于某种原因，在为我的数据表制作复选框列时出现错误。

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

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;
    });

标签： angulartypescriptangular-materialangular7angular8

解决方案

您收到错误是因为您在displayedColumns.

为了修复错误，您需要：

  • 修复“选择”列的定义
  • 从 中排除您的选择列 iddisplayedColumns以防止多次使用它
  • 在行定义的 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，我在其中添加了一个和多个选择列的示例。（注意：我没有调整多选列示例的选择逻辑..）

推荐阅读