javascript - 是否可以使用 TypeScript 在 HTML 中“预渲染”一个 div?
问题描述
我有一个带有大角材料表的容器。我想“预渲染”这个 div,因为当我垂直或水平滚动时整个页面都会出错。
<div class="table-container" id="prerender">
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
...
</table>
</div>
是否有可能的解决方案说应该首先呈现该 div 的浏览器?也许:
document.getElementById("prerender").render()
解决方案
我强烈建议您使用Angular 材质 Paginator。根据 angular material documentations,您的html
文件应如下所示:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="progress">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
<td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="color">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
<td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </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]"></mat-paginator>
</div>
还有你的ts
文件:
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
/** Constants used to fill up our data base. */
const COLORS: string[] = [
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
'aqua', 'blue', 'navy', 'black', 'gray'
];
const NAMES: string[] = [
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
];
/**
* @title Data table with sorting, pagination, and filtering.
*/
@Component({
selector: 'table-overview-example',
styleUrls: ['table-overview-example.css'],
templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample implements OnInit {
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
dataSource: MatTableDataSource<UserData>;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
constructor() {
// Create 100 users
const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(users);
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: id.toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
将数据限制到某些页面可以防止在垂直或水平滚动时出现故障。
推荐阅读
- python - 嵌套循环替换数据框中的行
- office-js - 对 Word 加载项的 UI 所做的更改在运行时不显示
- python - Python neo4j - 我们可以显示图形实例吗?
- laravel - 使用 Vue-Router 时 Webpack 在 Laravel 应用程序中生成空 CSS 文件
- python - python中是否有相当于Matlab的finv?
- 2sxc - 将 Angular 代码导入 2SXC 的最佳方法是什么
- dictionary - 将自定义字典映射到推文数据框
- php - AngularJS用一个对象设置formData
- python - 使用 BeautifulSoup,在两种不同的情况下调用相同的函数时,我得到了两种不同的结果
- javascript - 如何让计时器在点击 Javascript 时停止