Как разрешить дублирование значения заголовка в угловом материале.
У меня есть несколько заголовков и здесь значение заголовка одинаковы. Это дает ошибку:
Предоставлено повторяющееся имя определения столбца
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 здесь.
Надеюсь, это ясно.
Для тех, кто столкнулся с этой проблемой после обновления Angular 9, таких как Darren, и не хочет перемещать вложенную таблицу в отдельный шаблон, вы можете просто добавить * ngIf во вложенную таблицу:
<table mat-table [dataSource]="dataSource" *ngIf="element == expandedElement">
Обновить: Эта ошибка была устранена в @ angular / material версии 9.2.0.
Для тех из вас, кто решил этот вопрос в связи с переходом на 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>
У меня была такая же ошибка, и это была моя ошибка, потому что у меня было 2 столбца с одинаковым именем (matColumnDef="email"
в моем случае), поэтому matColumnDef должен быть уникальным.
Похожие вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.