angular - 隐藏列 Mat-Table Angular

Question

我正在使用 mat-table，我需要让它响应，当用户从手机访问时，七列它只显示三个有人可以指导我吗？

我尝试使用 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

更新

正如在下面的评论中指出的那样，Flex 布局从 v 7.0.0 和 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-h​​eader-row 标签中，要显示的列是 *matHeaderRowDef 的一部分。例如:

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

此变量(在本例中为 displayedColumns)控制实际显示的列。您正在使用 fxHide，因此您可以在组件中导入 ObservableMedia 并注入(inject)它，然后使用它在屏幕更改大小时修改显示的列时发出的可观察对象。详情 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'
        }
    };
}

现在，如果用户将手机切换到横屏模式，您的表格就会响应。