Как разрешить дублирование значения заголовка в угловом материале.

У меня есть несколько заголовков и здесь значение заголовка одинаковы. Это дает ошибку:

Предоставлено повторяющееся имя определения столбца

-4
gsr 21 Авг 2018 в 15:14

4 ответа

Лучший ответ

Если вы прочитаете документы здесь, вы увидите следующее:

@Input ('matColumnDef') name: string

Уникальное имя для этого столбца.

(курсив мой)

Я предполагаю (поскольку вы не передавали какой-либо код), что причина того, что вы получаете эту ошибку, заключается в том, что одно и то же имя указано в списке отображаемых столбцов несколько раз.

Обходным путем является создание новых объектов, которые содержат имя свойства / столбца, а также uniqueIdentifier для angular для внутреннего использования (в моем примере я поместил их в массив с именем 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 здесь.

Надеюсь, это ясно.

8
Chris 24 Авг 2018 в 17:51

Для тех, кто столкнулся с этой проблемой после обновления Angular 9, таких как Darren, и не хочет перемещать вложенную таблицу в отдельный шаблон, вы можете просто добавить * ngIf во вложенную таблицу:

<table mat-table [dataSource]="dataSource" *ngIf="element == expandedElement">

Обновить: Эта ошибка была устранена в @ angular / material версии 9.2.0.

2
InformatikBabo 26 Мар 2020 в 10:13

Для тех из вас, кто решил этот вопрос в связи с переходом на Angular 9 с такими вложенными таблицами, как Darren, похоже, что решение состоит в том, чтобы переместить вложенную таблицу в отдельный шаблон:

<table mat-table>
...

<!--Move the nested table out of the parent table and into a template, then reference it with a container-->
<ng-container *ngTemplateOutlet="nestedTable; context: { datasource: myRowsChildDatasource }"></ng-container>
...
</table>

<ng-template #nestedTable let-datasource="datasource">
  <table mat-table [dataSource]="datasource">
  </table>
</ng-template>
0
John 27 Фев 2020 в 14:19

У меня была такая же ошибка, и это была моя ошибка, потому что у меня было 2 столбца с одинаковым именем (matColumnDef="email" в моем случае), поэтому matColumnDef должен быть уникальным.

0
Dionis Oros 14 Мар 2020 в 22:42
51948450