Angular Material动态表格添加操作列遇重复列名错误求助

问题原因 #

触发重复列名错误的核心原因是**action列被重复定义**：

1. 你在displayedColumns数组中包含了action字段，通过*ngFor="let column of displayedColumns"循环时，会自动生成一个matColumnDef="action"的列定义；
2. 你又手动编写了一个独立的matColumnDef="action"列定义块。

这两个重复的列定义导致Angular Material抛出重复列名冲突错误。

解决方案 #

修改HTML模板的循环逻辑，让它跳过action列的自动生成，保留手动编写的操作列定义即可。同时保持displayedColumns数组中包含action，确保表格能渲染该列。

修改后的HTML模板代码 #

<div class="containerS1">
    <button (click)="showRetourAchat()">Retour Achat</button>
    <button (click)="showRetourVente()">Retour Vente</button>       
    <div class="AddProduct">
        <button (click)="openDialog()">Ajouter un retour</button>
    </div>
    
    <div class="containerS2">
        <mat-form-field>
            <mat-label>Filter</mat-label>
            <input matInput (keyup)="applyFilter($event)" placeholder="Chercher" #input>
        </mat-form-field>
        
        <div class="mat-elevation-z8">
            <table mat-table [dataSource]="dataRetour">
                <!-- 循环生成除action外的所有数据列 -->
                <ng-container *ngFor="let column of displayedColumns.filter(col => col !== 'action')" [matColumnDef]="column">
                    <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
                    <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
                </ng-container>
                <!-- 手动定义action操作列，绑定编辑/删除方法 -->
                <ng-container matColumnDef="action">
                    <th mat-header-cell *matHeaderCellDef> Action </th>
                    <td mat-cell *matCellDef="let element"> 
                        <button mat-icon-button color="primary" (click)="editRetour(element)">
                            <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-icon-button color="warn" (click)="deleteRetour(element.id)">
                            <mat-icon>delete</mat-icon>
                        </button> 
                    </td>
                </ng-container>
              
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
        
            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
        </div>
    </div>
</div>

TypeScript代码无需修改 #

你当前的TypeScript代码中，displayedColumns数组保留action字段是正确的，不需要改动——表格需要通过这个数组识别要渲染的所有列。

额外说明 #

• 已为操作列按钮绑定editRetour和deleteRetour方法，确保点击能触发对应的编辑/删除逻辑；
• 如果不需要对操作列进行排序，可移除action列头的mat-sort-header属性，避免无效的排序绑定。

内容的提问来源于stack exchange，提问作者Nadia akrach