Css Mat table-分页器过流和按钮样式不同
我添加了mat paginator，但当我选择每页的项目时，选项没有正确对齐。 下面是component.html文件Css Mat table-分页器过流和按钮样式不同,css,angular,css-selectors,angular-material,Css,Angular,Css Selectors,Angular Material,我添加了mat paginator，但当我选择每页的项目时，选项没有正确对齐。 下面是component.html文件 <div class="table-responsive" *ngIf="resultssummaries"> <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" multiTemplateData
<div class="table-responsive" *ngIf="resultssummaries">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort class="mat-elevation-z8" matSort width="100%">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Currency Code Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.id}} </td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="build">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Build Version </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.buildversion}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="host">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Host Name </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.hostAddress}} </td>
</ng-container>
<!-- Fraction Symbol Column -->
<ng-container matColumnDef="tests">
<th mat-header-cell *matHeaderCellDef > All Tests </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.alltests}} </td>
</ng-container>
<!-- Fraction Name Column -->
<ng-container matColumnDef="pass">
<th mat-header-cell *matHeaderCellDef > All Pass </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allpass}} </td>
</ng-container>
<ng-container matColumnDef="fails">
<th mat-header-cell *matHeaderCellDef > All Fails </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allfails}} </td>
</ng-container>
<ng-container matColumnDef="errors">
<th mat-header-cell *matHeaderCellDef > All Errors </th>
<td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allerrors}} </td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="element.recordStatus === I_INVALID_RECORD_INDICATOR">
<table mat-table [dataSource]="element.testsummary" multiTemplateDataRows class="mat-elevation-z8" matSort width="100%">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Currency Code Column -->
<ng-container matColumnDef="package">
<th mat-header-cell *matHeaderCellDef mat-sort-header> package name </th>
<td mat-cell *matCellDef="let test" align="left">{{test.packageName}}</td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="tests">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tests </th>
<td mat-cell *matCellDef="let test" align="left"> {{test.tests}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="fail">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fail </th>
<td mat-cell *matCellDef="let test" align="left"> {{ test.fail }} </td>
</ng-container>
<!-- Fraction Symbol Column -->
<ng-container matColumnDef="error">
<th mat-header-cell *matHeaderCellDef> Error </th>
<td mat-cell *matCellDef="let test" align="left"> {{test.error }} </td>
</ng-container>
<!-- Fraction Name Column -->
<ng-container matColumnDef="pass">
<th mat-header-cell *matHeaderCellDef> Pass </th>
<td mat-cell *matCellDef="let test" align="left">{{test.pass}} </td>
</ng-container>
<ng-container matColumnDef="expandedChildDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement1 ? 'expanded' : 'collapsed'" *ngIf="element.recordStatus === I_INVALID_RECORD_INDICATOR">
<table mat-table [dataSource]="element.testcases" class="mat-elevation-z8" matSort width="100%">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.date}}</td>
</ng-container>
<!-- Currency Symbol Column -->
<ng-container matColumnDef="class">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Class </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{testcase.className}} </td>
</ng-container>
<!-- Base Name Column -->
<ng-container matColumnDef="testname">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Test Name </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{ testcase.testName }} </td>
</ng-container>
<ng-container matColumnDef="rrn">
<th mat-header-cell *matHeaderCellDef> RRN </th>
<td mat-cell *matCellDef="let testcase" align="left"> {{testcase.rrn }} </td>
</ng-container>
<ng-container matColumnDef="endpoints">
<th mat-header-cell *matHeaderCellDef> End Points </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.endpoints}} </td>
</ng-container>
<ng-container matColumnDef="result">
<th mat-header-cell *matHeaderCellDef> Result </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.result}} </td>
</ng-container>
<ng-container matColumnDef="failreason">
<th mat-header-cell *matHeaderCellDef> Result </th>
<td mat-cell *matCellDef="let testcase" align="left">{{testcase.failReason}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTestcase"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumnsTestcase;">
</tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsTestSummary"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumnsTestSummary;"
class="example-element-row"
[class.example-expanded-row]="expandedElement1 === element"
(click)="expandedElement1 = expandedElement1 === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedChildDetail']" class="example-detail-row"></tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element"
(click)="expandedElement1 = expandedElement1 === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(click)="expandedElement = expandedElement === element ? null : element"
(click)="expandedElement1 = expandedElement1 === element ? null : element"> </mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
</div>
</div>
</div>
import {Component, OnInit, OnDestroy, ViewChild, AfterViewInit, ChangeDetectorRef} from '@angular/core';
import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import {IResultssummary, Resultssummary} from 'app/shared/model/resultssummary.model';
import { Principal } from 'app/core';
import { ITEMS_PER_PAGE } from 'app/shared';
import { ResultssummaryService } from './resultssummary.service';
import { DataSource } from '@angular/cdk/collections';
import { Observable, of } from 'rxjs';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {MatTableDataSource, MatSortModule, MatSort, MatPaginator, MatTable, PageEvent} from '@angular/material';
@Component({
selector: 'jhi-resultssummary',
templateUrl: './resultssummary.component.html',
styleUrls: ['resultsummary.entity.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class ResultssummaryComponent extends DataSource<any> implements OnInit, OnDestroy {
currentAccount: any;
// testsummary : ITestSummary;
resultssummaries: IResultssummary[];
error: any;
success: any;
eventSubscriber: Subscription;
routeData: any;
links: any;
totalItems: any;
queryCount: any;
itemsPerPage: any;
page: any;
predicate: any;
previousPage: any;
reverse: any;
displayedColumns: string[] = ['id', 'build', 'host', 'tests', 'pass', 'errors', 'fails'];
displayedColumnsTestSummary: string[] = ['package', 'tests', 'fail', 'error', 'pass'];
displayedColumnsTestcase: string[] = ['date', 'class', 'testname', 'rrn', 'endpoints', 'result', 'failreason'];
dataSource = new MatTableDataSource<IResultssummary>();
expandedElement: any;
expandedElement1: any;
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
private paginator: MatPaginator;
private matsort: MatSort;
pageEvent: PageEvent;
setPageSizeOptions(setPageSizeOptionsInput: string) {
this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
@ViewChild(MatSort) set matSort(ms: MatSort) {
this.matsort = ms;
this.setDataSourceAttributes();
}
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.changeDetector.detectChanges();
this.setDataSourceAttributes();
}
setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.changeDetector.detectChanges();
this.dataSource.sort = this.matsort;
if (this.paginator && this.sort) {
this.applyFilter('');
}
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
constructor(
private resultssummaryService: ResultssummaryService,
private parseLinks: JhiParseLinks,
private jhiAlertService: JhiAlertService,
private principal: Principal,
private activatedRoute: ActivatedRoute,
private router: Router,
private eventManager: JhiEventManager,
private changeDetector: ChangeDetectorRef
) {
super();
this.itemsPerPage = ITEMS_PER_PAGE;
this.routeData = this.activatedRoute.data.subscribe(data => {
this.page = data.pagingParams.page;
this.previousPage = data.pagingParams.page;
this.reverse = data.pagingParams.ascending;
this.predicate = data.pagingParams.predicate;
});
}
isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
isExpansionDetailRow1 = (i: number, row: Object) => row.hasOwnProperty('detailRow');
connect(): Observable<Element[]> {
const rows = [];
this.resultssummaries.forEach(element => rows.push(element, { detailRow: true, element }));
console.log(rows);
return of(rows);
}
disconnect() { }
loadAll() {
this.resultssummaryService
.query({
page: this.page - 1,
size: this.itemsPerPage,
sort: this.sort()
})
.subscribe(
(res: HttpResponse<IResultssummary[]>) => this.paginateResultssummaries(res.body , res.headers),
(res: HttpErrorResponse) => this.onError(res.message),
);
}
loadPage(page: number) {
if (page !== this.previousPage) {
this.previousPage = page;
this.transition();
}
}
transition() {
this.router.navigate(['/resultssummary'], {
queryParams: {
page: this.page,
size: this.itemsPerPage,
sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
}
});
this.loadAll();
}
clear() {
this.page = 0;
this.router.navigate([
'/resultssummary',
{
page: this.page,
sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
}
]);
this.loadAll();
}
ngOnInit() {
this.loadAll();
this.principal.identity().then(account => {
this.currentAccount = account;
});
this.registerChangeInResultssummaries();
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
trackId(index: number, item: IResultssummary) {
return item.id;
}
registerChangeInResultssummaries() {
this.eventSubscriber = this.eventManager.subscribe('resultssummaryListModification', response => this.loadAll());
}
sort() {
const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
if (this.predicate !== 'id') {
result.push('id');
}
return result;
}
private paginateResultssummaries(data: IResultssummary[], headers: HttpHeaders) {
this.links = this.parseLinks.parse(headers.get('link'));
this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
this.queryCount = this.totalItems;
this.resultssummaries = data;
this.resultssummaries = data.map(resultsummaries => new Resultssummary().deserialize(resultsummaries));
this.dataSource.data = this.resultssummaries;
console.log(this.resultssummaries);
console.log(this.dataSource);
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
/* ngAfterViewInit() {
this.dataSource.sort = this.matsort;
this.dataSource.paginator = this.paginator;
}
*/
}
如何修复溢出的屏幕这是因为未启用in Material主题。启用材料主题后，问题消失了为什么投票失败？我没有投反对票，但这可能是因为你没有明确提出问题。考虑在你的文章末尾加上一个句子，明确地问你想要回答的具体问题。我发现了原因，那是因为在材料主题中没有启用。
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
table {
width: 100%;
}
tr.example-detail-row {
height: 0;
}
tr.example-element-row:not(.example-expanded-row):hover {
background: #e3f5f4;
}
tr.example-element-row:not(.example-expanded-row):active {
background: #d7f3da;
}
.example-element-row td {
border-bottom-width: 0;
}
.example-element-detail {
overflow: hidden;
display: flex;
}
.example-element-diagram {
min-width: 80px;
border: 2px solid black;
padding: 8px;
font-weight: lighter;
margin: 8px 0;
height: 104px;
}
.example-element-symbol {
font-weight: bold;
font-size: 40px;
line-height: normal;
}
.example-element-description {
padding: 16px;
}
.example-element-description-attribution {
opacity: 0.5;
}
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
width: 100%;
}
.element-row {
position: relative;
}
.element-row:not(.expanded) {
cursor: pointer;
}
.element-row:not(.expanded):hover {
background: #f5f5f5;
}
.element-row.expanded {
border-bottom-color: transparent;
}
th.mat-sort-header-sorted {
color: black;
}
:host {
display: block;
margin-top: 1rem;
}
.info-text {
text-align: center;
}
.post-image {
width: 50%;
}
.post-image img {
width: 100%;
border: 2px solid rgb(202, 202, 202);
}
mat-paginator {
display: flex;
justify-content: center;
}
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
font-size: xx-small;
line-height: 10em;
height: 3em;
}