Mat-Paginator Page-Size-Dropdown 未正确呈现

Question

我正在尝试创建一个带有排序和分页的表格。当我试图更改应该在一页上呈现的元素数量时，分页器的行为方式很奇怪。如果我单击下拉列表，它会在表格下方呈现下拉列表的内容。 （见截图）（如果我点击 5,10,25 或 100，它会选择正确的数字并设置分页器，所以功能是给定的）

代码：

github-repo：https://github.com/Pethaudi/testing-mat-table

app.module:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        NoopAnimationsModule,
        MatTableModule,
        MatSortModule,
        MatPaginatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component:

export interface PeriodicElement {
    position: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
    { position: 1 },
    { position: 2 },
    { position: 3 },
    { position: 4 },
    { position: 5},
    { position: 6 },
    { position: 7},
    { position: 8 },
    { position: 9 },
    { position: 10},
];

@Component({
    selector: 'app-root',
    template: `
<div id="body"  class="mat-elevation-z8">
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

    <table mat-table [dataSource]="dataSource" matSort>

        <!-- Position Column -->
        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef mat-sort-header appChange> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}}
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>`
})
export class AppComponent {
    @ViewChild(MatPaginator, {static: true})
    paginator: MatPaginator;

    @ViewChild(MatSort, {static: true })
    sort: MatSort;

    displayedColumns: string[] = ['position'];
    dataSource = new MatTableDataSource();

    ngOnInit() {
        this.dataSource = new MatTableDataSource(ELEMENT_DATA);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
    }
}

依赖：

{
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.3",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

谢谢！

Answer 1

代码是正确的。错误在于 Angular Material 是通过 npm i @angular/material 添加的，而不是通过 ng add @angular/material 添加的。

ng add 添加了一些其他配置，尤其是需要的主题。如果没有给定主题，角度将无法正确渲染组件。

要解决此问题，需要以下步骤：

• 添加src/custom-theme.scss（https://material.angular.io/guide/getting-started），内容如下：

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$testing-mat-table-primary: mat-palette($mat-indigo);
$testing-mat-table-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$testing-mat-table-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$testing-mat-table-theme: mat-light-theme($testing-mat-table-primary, $testing-mat-table-accent, $testing-mat-table-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($testing-mat-table-theme);

• 在angular.json 下projects.[your-project].architect.build.styles 添加"src/custom-theme.scss",