更新

Question

我正在使用垫子桌子，我需要使其具有响应性，当用户通过手机访问时，它的七个列只能显示三个有人可以指导我吗？

我尝试使用fxHide，但没有成功。

.button-raised {
  width: 60px;
  height: 30px;
  font-size: 12px;
  min-width: 0px; 
  line-height: 0px; 
  padding: 0 0px;
}
.rdesp-status mat-icon {margin: 4px;}
.mat-table {
  overflow: auto;
  max-height: 500px;
}

      <mat-table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">

        <ng-container class="internalId" matColumnDef="internalId">
          <mat-header-cell *matHeaderCellDef  fxHide  fxShow.gt-sm >Nº RDESP</mat-header-cell>
          <mat-cell *matCellDef="let element" fxHide  fxShow.gt-sm  >
            <p class="text-grey" matTooltip="{{element.internalId}}">{{element.number}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="alias" matColumnDef="alias">
          <mat-header-cell *matHeaderCellDef>Apelido</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.alias}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="containerName" matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Nome</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span class="mobile-label">Nome</span>
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.name}}</p>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="job">
          <mat-header-cell *matHeaderCellDef>Job</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span class="mobile-label">Job</span>
            <p class="text-truncate" matTooltip="{{element.job}}">{{element.job}}</p>
          </mat-cell>

Answer 1

更新

正如下面的评论所指出的，自7.0.0版起，Flex-layout已更改，ObservableMedia已弃用，并由MediaObserver（详细信息here）取代。

这是我最初为新语法发布的代码所需的更改：

import { MediaObserver, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

    displayedColumns: string[];
    dataSource = new MatTableDataSource</* Type of Data */>();
    currentScreenWidth: string = '';
    flexMediaWatcher: Subscription;
    // ... other variables

    constructor(private mediaObserver: MediaObserver) {
        this.flexMediaWatcher = mediaObserver.media$.subscribe((change: MediaChange) => {
            if (change.mqAlias !== this.currentScreenWidth) {
                this.currentScreenWidth = change.mqAlias;
                this.setupTable();
            }
        }); // Be sure to unsubscribe from this in onDestroy()!
    };

    setupTable() {
        this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
        if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
            this.displayedColumns.shift(); // remove 'internalId'
        }
    };
}

原始答案：

好像您在问题中丢失了一些数据。模板中应该有定义定义的行：<mat-header-row> and <mat-row>标签。在mat-header-row标签内，要显示的列是* matHeaderRowDef的一部分。例如：

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

此变量（在本例中为displayedColumns）控制实际显示的列。您正在使用fxHide，因此可以在组件中导入ObservableMedia并将其注入，然后在屏幕大小更改时使用它发出的observableMedia来修改显示的列。详细信息here。例如：

import { ObservableMedia, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

    displayedColumns: string[];
    dataSource = new MatTableDataSource</* Type of Data */>();
    currentScreenWidth: string = '';
    flexMediaWatcher: Subscription;
    // ... other variables

    constructor(private media: ObservableMedia) {
        this.flexMediaWatcher = media.subscribe((change: MediaChange) => {
            if (change.mqAlias !== this.currentScreenWidth) {
                this.currentScreenWidth = change.mqAlias;
                this.setupTable();
            }
        }); // Be sure to unsubscribe from this in onDestroy()!
     };

    setupTable() {
        this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
        if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
            this.displayedColumns.shift(); // remove 'internalId'
        }
    };
}

例如，如果用户将手机切换到横向模式，那么您的桌子就会响应。

隐藏列Mat-Table Angular

1 个答案:

更新

原始答案：