css - 角材料表多个粘性行
问题描述
根据官方文档,我们可以使用sticky
input for sticky header
row in mat-table
。但我需要使前 3 行的垫子表变得粘稠。有没有办法做到这一点?
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
解决方案
如何为前 2 行创建一个数组(您需要在粘性标题中),之后您可以从您的实际数据集中删除这 2 行(使用shift()
)...
相关的 HTML:
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No.
<div *ngFor="let data of firstTwoRows; let i = index">
<p *ngIf="i<2">{{data.position}} </p>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name
<div *ngFor="let data of firstTwoRows; let i = index">
<p *ngIf="i<2">{{data.name}} </p>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight
<div *ngFor="let data of firstTwoRows; let i = index">
<p *ngIf="i<2">{{data.weight}} </p>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol
<div *ngFor="let data of firstTwoRows; let i = index">
<p *ngIf="i<2">{{data.symbol}} </p>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
相关TS:
import { Component } from "@angular/core";
/**
* @title Table with sticky header
*/
@Component({
selector: "table-sticky-header-example",
styleUrls: ["table-sticky-header-example.css"],
templateUrl: "table-sticky-header-example.html"
})
export class TableStickyHeaderExample {
displayedColumns = ["position", "name", "weight", "symbol"];
dataSource = ELEMENT_DATA;
firstTwoRows: PeriodicElement[] = [];
constructor() {
this.firstTwoRows = [
{ position: 1, name: "Hydrogen", weight: 1.0079, symbol: "H" },
{ position: 2, name: "Helium", weight: 4.0026, symbol: "He" }
];
this.dataSource.shift();
this.dataSource.shift();
}
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: "Hydrogen", weight: 1.0079, symbol: "H" },
{ position: 2, name: "Helium", weight: 4.0026, symbol: "He" },
{ position: 3, name: "Lithium", weight: 6.941, symbol: "Li" },
{ position: 4, name: "Beryllium", weight: 9.0122, symbol: "Be" },
{ position: 5, name: "Boron", weight: 10.811, symbol: "B" },
{ position: 6, name: "Carbon", weight: 12.0107, symbol: "C" },
{ position: 7, name: "Nitrogen", weight: 14.0067, symbol: "N" },
{ position: 8, name: "Oxygen", weight: 15.9994, symbol: "O" },
{ position: 9, name: "Fluorine", weight: 18.9984, symbol: "F" },
{ position: 10, name: "Neon", weight: 20.1797, symbol: "Ne" }
];
在这里完成工作堆栈闪电战
推荐阅读
- java - 这是一本书中的一个问题,我无法理解,但不知何故我想知道我的编码是否正确
- substrate - Substrate 是否有终端 CLI 工具,例如 Ethereum attach?
- git - `git rebase` 期间的许多合并冲突
- xml - 为什么不能用xidel提取数据?
- python - City'对象在django-autocomplete-light中没有属性'region__name'
- node.js - 如何在 nodejs 中的 AWS SQS 中创建请求-响应模式?
- node.js - Fluentd Kubernetes Nodejs:错误:连接 ECONNREFUSED 127.0.0.1:24224
- angular - 从 Angular v10 迁移到 v10.1 后的 Angular Universal 问题
- php - 页眉和正文是什么意思
- c++ - Assimp 是否能够加载 3mf 文件的嵌入纹理?