Angular中mat-table内ng-container的$index变量失效问题求助

问题原因 #

你的代码里存在两个核心问题导致样式无法生效：

1. 列渲染范围不匹配：mat-header-row只会渲染columnsToDisplay数组中指定的列。如果columnDefinitions里索引为2的列的name不在columnsToDisplay中，对应的mat-header-cell根本不会被渲染到页面，样式自然无法触发。
2. 索引逻辑错位：你基于columnDefinitions的循环索引做判断，但实际渲染的列是columnsToDisplay筛选后的结果，两者的索引没有对应关系。比如columnDefinitions有3列，但columnsToDisplay只包含前两列，那索引2的列不会出现在表头中。

解决办法 #

方案一：确保目标列在渲染列表中 #

如果确实要给columnDefinitions中索引为2的列加样式，先确认该列的name存在于columnsToDisplay数组内：

// 假设索引2的列名为'bar'，将其加入渲染列表
public columnsToDisplay: string[] = ['boo', 'foo', 'bar'];

方案二：基于实际渲染列的索引判断 #

如果是想给columnsToDisplay中第3个（索引2）列加样式，直接遍历columnsToDisplay生成列定义，保证循环索引和实际渲染列的顺序一致：

<mat-table [dataSource]="items">
    @for (columnName of columnsToDisplay; track columnName; let index = $index) {
        @let column = columnDefinitions.find(c => c.name === columnName);
        <ng-container matColumnDef="{{columnName}}">
            <mat-header-cell *matHeaderCellDef>
                <div
                    [ngClass]="{
                        'highlighted': index === 2
                    }">
                    {{column?.name}}
                </div>
            </mat-header-cell>
            <!--Cell definition omitted-->
        </ng-container>
    } 
    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</mat-table>

额外排查：样式穿透问题 #

如果以上操作后样式仍不生效，检查Angular视图封装是否限制了样式作用范围：

• 在组件样式中使用::ng-deep强制穿透（临时调试可用，官方不推荐长期使用）：

::ng-deep .highlighted {
    background-color: #ffeeba;
}

• 或者将.highlighted的样式放到全局样式文件（如styles.css）中；
• 也可以在组件元数据中关闭视图封装：

@Component({
    // 其他配置省略
    encapsulation: ViewEncapsulation.None
})

内容的提问来源于stack exchange，提问作者Ilya Loskutov