Скрыть столбец Mat-Table Angular - PullRequest
Новая
       26

Скрыть столбец Mat-Table Angular

0 голосов
/ 03 ноября 2018

Я работаю с мат-таблицей, мне нужно, чтобы она была отзывчивой, при доступе пользователя с сотового телефона, в семи столбцах отображается только три Может ли кто-нибудь направить меня?

Я пытался использовать 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>

1 Ответ

0 голосов
/ 04 ноября 2018

Обновление

Как отмечалось в комментариях ниже, Flex-макет изменился с версии 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-header-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'
        }
    };
}

Теперь ваша таблица будет реагировать, если пользователь переворачивает свой телефон, например, в альбомный режим.

...