格式化材料表分页和过滤器

Question

您好我正在使用Angular Material表（所有功能都没有问题），并希望对Pagination和Filter的默认功能进行一些更改。我无法弄清楚材料表中是否有指令/功能，或者我必须单独添加它？ HTML

<div class="col-lg-12">
            <div class="panel panel-red">
                <div class="panel-heading">To Do List</div>
                <div class="panel-body">
                    <mat-form-field>
                        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                    </mat-form-field>
                    <mat-table #table [dataSource]="dataSource" matSort>
                        <ng-container matColumnDef="Comment">
                            <mat-header-cell *matHeaderCellDef mat-sort-header> Commment </mat-header-cell>
                            <mat-cell *matCellDef="let row"> {{row.Comment}} </mat-cell>
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
                        <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
                    </mat-table>
                    <mat-paginator #paginator
                                   [pageSize]="10"
                                   [pageSizeOptions]="[5, 10, 20]" >
                    </mat-paginator>
                </div>
            </div>

        </div>

component.ts

export class DashboardComponent implements OnInit {
    dataSource = new MatTableDataSource();
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;


    displayedColumns = ['Comment'];

     ngOnInit(): void {

        console.log("id : " + this.userID)
        this.GetUserLocations(this.userID)
        this.getBSAFollowup();
        this.GetToDoList(this.userID);

        //this.dataSource = this.toDoList;
    }
    onOpen() {

        this._dashboardService.delBSAFollowup(this.selectedRowID).subscribe(() => {
          //  this.showMessage('File has been uploaded successfully!', 'alert alert-success');
           this.getBSAFollowup();

        },
          error => console.log('Upload File: '));

    }

    GetToDoList(ID: string) {
        this._dashboardService.getToDoList(ID)
            .subscribe(
            data => {
              //  this.toDoList = data.result;
                //this.dataSource = new MatTableDataSource(data.result);
                this.dataSource.data = data.result;
                  },
            error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
    }

     ngAfterViewInit() {

        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }
    applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
        this.dataSource.filter = filterValue;
    }

}

这是它的样子 我想在两个括号之间添加数字，所以有些事情是这样的

顶部的过滤器也需要伸展以覆盖整个网格

********* UPDATE ******* ************************************************** *****

我能够将过滤器widh更改为100％...以覆盖网格空间的宽度。

 <mat-form-field style="width:100%">
                        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                    </mat-form-field>

现在我需要弄清楚如何添加数字分页