Angular 删除响应上的角材质分页

我是否可以删除仅在移动设备上使用角度材质生成的选项卡的分页

我正在研究Angular 6，并使用最新版本的材质

谢谢

您可以使用来检测与角度材质断点内联的屏幕大小，以有条件地设置

MatTableDataSource

paginator。本例假设您希望将移动“断点”设置为600px，但您可以调整到所需的任何px宽度：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { tap } from 'rxjs/operators';    

@Component({
  selector: 'table-pagination-example',
  styleUrls: ['table-pagination-example.css'],
  templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;

  isLargeScreen: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit() {
    this.breakpointObserver.observe([
      '(min-width: 600px)'
    ]).pipe(
      tap(result => this.isLargeScreen = result.matches)
    ).subscribe(result => {
      if (result.matches) {
        this.dataSource.paginator = this.paginator;
      } else {
        this.dataSource.paginator = null;
      }
    });
  }
}

这里演示了仅当媒体为平板电脑或网络时，才激活相应

MatTableDataSource

的分页器

---

希望这有帮助

你是说这个？没错，但已经得到了一个很好的答案：）您还可以在mat paginator中使用flex layout的fxHide.xs并删除isLargeScreen变量。

<mat-paginator [ngStyle]="{display: isLargeScreen ? 'block' : 'none'}" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>