web-dev-qa-db-ja.com

列のマットテーブルを非表示にするAngular

私はマットテーブルを使用しています。ユーザーが携帯電話からアクセスしたときに、7つの列に3つしか表示されない場合、それを応答可能にする必要があります。誰かが私を案内してくれませんか？

私は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>
angularangular-materialangular6
9
Eliemerson Fonseca

更新

以下のコメントで指摘されているように、Flexレイアウトはv 7.0.0で変更され、ObservableMediaは非推奨になり、MediaObserverに置き換えられました。詳細 こちら 。

新しい構文で最初に投稿したコードに必要な変更は次のとおりです。

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>

この変数（この場合はdisplayColumns）は、実際に表示される列を制御します。 fxHideを使用しているため、コンポーネントにObservableMediaをインポートしてインジェクトし、画面のサイズが変更されるたびに出力されるオブザーバブルを使用して、表示される列を変更できます。詳細 こちら 。例えば：

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'
        }
    };
}

これで、たとえばユーザーが携帯電話を横向きモードに切り替えた場合、テーブルが応答するようになります。

6
dmcgrandle