Предоставлено повторяющееся имя столбца: Angular Таблица данных материала

Question

По какой-то причине я получаю сообщение об ошибке при создании столбца флажка для моей таблицы данных.

Я понимаю ошибку с консоли, но что я могу сделать, чтобы ее исправить?

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

Answer 1

Вы получаете ошибку, потому что вы дважды зацикливаетесь на displayedColumns.

Чтобы исправить ошибку, вам необходимо:

• исправить определение столбца "select"
• исключить идентификатор выбранного столбца из displayedColumns чтобы не использовать его несколько раз
• включите идентификатор столбца выбора в список идентификаторов для определений строк

столбец выбора

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

Здесь вам нужно удалить *ngFor="...", если вы хотите отобразить только один столбец выбора с флажком для каждой строки. Если вы хотите выбрать несколько столбцов (например, по одному для каждого столбца данных), вам нужно определить список уникальных идентификаторов для этих столбцов и l oop над ними:

<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 списком, включающим все идентификаторы столбцов , за исключением идентификаторов выбранных столбцов.

Rows

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

Наконец, используйте список идентификаторов столбцов, который содержит идентификаторы столбцов данных, а также идентификаторы выбранных столбцов

Имеют посмотрите на этот Stackblitz , где я добавил примеры для одного и нескольких столбцов выбора. ( Примечание: я не настраивал логи выбора c для примера с несколькими столбцами .. )

Answer 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>
...

На самом деле, если вам нужен флажок на строку, вам не нужно создавать mat-checkbox на displayedColumns.

Здесь у нас есть пример Angular Материал: 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>

Теперь все должно работать как положено.