<ng-container>有固定列 的效果吗
时间: 2024-05-10 22:14:34 浏览: 172
<ng-container>本身不是一个可见的HTML元素,而是一个容器,可以用来包含其他HTML元素或指令。因此,<ng-container>本身不会产生固定列的效果。
要实现固定列的效果,可以使用CSS样式或Angular Material中的表格组件。例如,在Angular Material中,可以使用<mat-table>组件,并通过指定<ng-container matColumnDef>来定义列,并使用CSS样式将其固定在表格的左侧或右侧。例如:
```html
<mat-table [dataSource]="dataSource">
<!-- define columns -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- fixed column using CSS -->
<ng-container matColumnDef="fixed" class="fixed-column">
<mat-header-cell *matHeaderCellDef> Fixed Column </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.fixed}} </mat-cell>
</ng-container>
<!-- define table rows -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<!-- CSS style for fixed column -->
<style>
.fixed-column {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
}
</style>
```
在上面的示例中,我们使用<ng-container matColumnDef="fixed">来定义一个固定列,并使用CSS样式将其固定在表格的左侧。要在右侧固定列,可以将CSS样式中的left属性改为right即可。
阅读全文