Angular 添加';跳转到';以角度显示材质分页的功能
我需要在材料分页中添加“跳转到”功能。它没有内置的方法,所以我需要手动添加它 目前我有以下代码:Angular 添加';跳转到';以角度显示材质分页的功能,angular,pagination,angular-material,Angular,Pagination,Angular Material,我需要在材料分页中添加“跳转到”功能。它没有内置的方法,所以我需要手动添加它 目前我有以下代码: <mat-paginator [length]="pageLength" [pageSize]="10" [pageSizeOptions]="pageLength | checkPageLength" [showFirstLastButtons]="tru
<mat-paginator [length]="pageLength"
[pageSize]="10"
[pageSizeOptions]="pageLength | checkPageLength"
[showFirstLastButtons]="true">
</mat-paginator>
它表明:
我需要它有一个文本框和一个跳转到特定页面的“go”按钮,因为我有很多页面。table-pagination-example.html
table-pagination-example.html
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<span class="paginator-wrapper mat-paginator-container">
<span class="page-index-selector mat-paginator-page-size">
<span class="page-index-text-wrapper mat-select-trigger mat-paginator-page-size-label">
Page index:
</span>
<mat-form-field class="mat-paginator-page-size-select mat-primary">
<input #pageSelect matInput type="number" [max]="pages" [min]="1" [ngModel]="getPage" (change)="pageToIndex($event.target.value)">
</mat-form-field>
</span>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
</span>
</div>
table-pagination-example.ts
import {Component, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
get pages() {
return this.paginator.getNumberOfPages();
}
get getPage() {
return this.paginator.pageIndex + 1;
}
pageToIndex(pageIndex) {
if (pageIndex < 0) {
pageIndex = pageIndex * -1;
}
this.paginator.pageIndex = pageIndex - 1;
}
}
export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
{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'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
{position: 21, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 22, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 23, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 24, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 25, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 26, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 27, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 28, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 29, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 30, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 31, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 32, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 33, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 34, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 35, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 36, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 37, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 38, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 39, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 40, name: 'Calcium', weight: 40.078, symbol: 'Ca'}
];
不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}
页面索引:
表-pagination-example.ts
从“@angular/core”导入{Component,ViewChild};
从“@angular/material”导入{MatPaginator,MatTableDataSource};
@组成部分({
选择器:“表分页示例”,
样式URL:['table-pagination-example.css'],
templateUrl:“表分页示例.html”,
})
导出类表分页示例{
displayedColumns=[“位置”、“名称”、“重量”、“符号”];
数据源=新MatTableDataSource(元素数据);
@ViewChild(MatPaginator)分页器:MatPaginator;
ngAfterViewInit(){
this.dataSource.paginator=this.paginator;
}
获取页面(){
返回此.paginator.getNumberOfPages();
}
获取getPage(){
返回this.paginator.pageIndex+1;
}
pageToIndex(页面索引){
如果(页面索引<0){
pageIndex=pageIndex*-1;
}
this.paginator.pageIndex=pageIndex-1;
}
}
导出接口元素{
名称:字符串;
职位:编号;
重量:个数;
符号:字符串;
}
常量元素_数据:元素[]=[
{位置:1,名称:'Hydrogen',重量:1.0079,符号:'H'},
{位置:2,名称:'氦',重量:4.0026,符号:'他'},
{位置:3,名称:'锂',重量:6.941,符号:'锂'},
{位置:4,名称:'铍',重量:9.0122,符号:'铍'},
{位置:5,名称:'硼',重量:10.811,符号:'B'},
{位置:6,名称:'Carbon',重量:12.0107,符号:'C'},
{位置:7,名称:'N',重量:14.0067,符号:'N'},
{位置:8,名称:'氧气',重量:15.9994,符号:'O'},
{位置:9,名称:'氟',重量:18.9984,符号:'F'},
{位置:10,名称:'Neon',重量:20.1797,符号:'Ne'},
{位置:11,名称:'钠',重量:22.9897,符号:'钠'},
{位置:12,名称:'Mg',重量:24.305,符号:'Mg'},
{位置:13,名称:'aluminal',重量:26.9815,符号:'Al'},
{位置:14,名称:'Silicon',重量:28.0855,符号:'Si'},
{位置:15,名称:“磷”,重量:30.9738,符号:“P'},
{位置:16,名称:'硫',重量:32.065,符号:'S'},
{位置:17,名称:'氯',重量:35.453,符号:'氯'},
{位置:18,名称:'Argon',重量:39.948,符号:'Ar'},
{位置:19,名称:'K',重量:39.0983,符号:'K'},
{位置:20,名称:'钙',重量:40.078,符号:'钙'},
{位置:21,名称:'Hydrogen',重量:1.0079,符号:'H'},
{位置:22,名称:'氦',重量:4.0026,符号:'他'},
{位置:23,名称:'锂',重量:6.941,符号:'锂'},
{位置:24,名称:'铍',重量:9.0122,符号:'铍'},
{位置:25,名称:'硼',重量:10.811,符号:'B'},
{位置:26,名称:'Carbon',重量:12.0107,符号:'C'},
{位置:27,名称:'N',重量:14.0067,符号:'N'},
{位置:28,名称:'氧',重量:15.9994,符号:'O'},
{位置:29,名称:'氟',重量:18.9984,符号:'F'},
{位置:30,名称:'Neon',重量:20.1797,符号:'Ne'},
{位置:31,名称:'钠',重量:22.9897,符号:'钠'},
{位置:32,名称:'Mg',重量:24.305,符号:'Mg'},
{位置:33,名称:'Aluminal',重量:26.9815,符号:'Al'},
{位置:34,名称:'Silicon',重量:28.0855,符号:'Si'},
{位置:35,名称:'磷',重量:30.9738,符号:'磷'},
{位置:36,名称:'硫',重量:32.065,符号:'S'},
{位置:37,名称:'氯',重量:35.453,符号:'氯'},
{位置:38,名称:'Argon',重量:39.948,符号:'Ar'},
{位置:39,名称:'K',重量:39.0983,符号:'K'},
{位置:40,名称:'钙',重量:40.078,符号:'钙'}
];