Question

我添加了垫式分页器，但是当我选择每页项目时，选项未正确对齐。以下是component.html文件

    <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>

我的组件ts如下

    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;
    }
*/
}

我的css文件如下所示

    .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;
}

任何帮助将不胜感激。我还在寻找其他选择。现在，当我单击页面时，页面如下所示

如何修复屏幕溢出的地方

Answer 1

这是因为未启用“材料”主题中的。启用实质主题后，问题就消失了

垫子表-分页器溢出和按钮样式也不同

1 个答案: