угловой2 таблица материалов скрыть столбец

У меня есть таблица угловых материалов2

<mat-table #table [dataSource]="dataSource" >

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="selected">
            <mat-header-cell *matHeaderCellDef>
                <mat-checkbox [(ngModel)]="selectAll"></mat-checkbox>
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <mat-checkbox [(ngModel)]="element.selected" [checked]="selectAll"></mat-checkbox>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> Id</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.id}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="requested_status">
            <mat-header-cell *matHeaderCellDef> Status</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.requested_status}}</mat-cell>
        </ng-container>
        ......

Мне нужно скрыть столбец в таблице некоторым логическим условием. Возможно ли это без изменения карты столбцов в моем компоненте?

displayedColumns = ['selected', 'id', ...];

Я пытался использовать *ngIf но он не работает. Как это сделать?

Ответ 1

Angular способ сделать это - обновить столбцы, переданные в шаблон строки:

HTML:

<mat-row *matRowDef="let row; columns: getDisplayedColumns();"></mat-row>

TS:

const columnDefinitions = [
  { def: 'col1', showMobile: true },
  { def: 'col2', showMobile: false },
];

getDisplayedColumns(): string[] {
  const isMobile = this.currentDisplay === 'mobile';
  return this.columnDefinitions
    .filter(cd => !isMobile || cd.showMobile)
    .map(cd => cd.def);
}

Ответ 2

В колонку, которую вы хотите скрыть, добавьте следующее:

[style.display]="'none'"

Вы должны добавить и к мат-вересковой ячейке, и к мат-ячейке.

Ответ 3

Наконец, я нашел способ скрыть столбец без изменения карты столбцов. Нам нужно создать директиву атрибута, через эту директиву мы можем установить свойство отображения элемента.

ShowColumnDirective:

import {Component, Directive, ElementRef, Input, AfterViewInit} from '@angular/core';
@Directive({ 
     selector: '[showCoulmn]' 
})
export class ShowColumnDirective implements AfterViewInit{
    @Input() showInput: string;
    constructor(private elRef: ElementRef) { 
    }
    ngAfterViewInit(): void {
    this.elRef.nativeElement.style.display = this.showInput;
    }
}

Объявите эту директиву в AppModule или любом другом модуле:

import {TableBasicExample} from './table-basic-example';
import {ShowColumnDirective} from './table-basic-example';
@NgModule({

  imports: [
    ..........
  ],

  declarations: [TableBasicExample, ShowColumnDirective],
  bootstrap: [TableBasicExample],
  providers: []
})
export class AppModule {}

Теперь мы можем использовать директиву внутри нашей таблицы html Component:

<ng-container matColumnDef="position">
  <mat-header-cell showCoulmn showInput="none" *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell showCoulmn showInput="none"    *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

Вот рабочий шаблон: https://plnkr.co/edit/Woyrb9Yx8b9KU3hv4RsZ?p=preview

Ответ 4

Единственное возможное решение, похоже, изменяет отображаемые столбцы в классе компонентов

displayedColumns = ['selected', 'id', ...];

Ответ 5

нет необходимости в каких-либо директивах.

просто используйте

[hidden] он будет работать ex: [hidden] = "show" в html и установить show в boolean в ts файле.

мой html-код:

Отдел {{element.department}}

Ответ 6

Я использую Angular Flex Responsive API (https://github.com/angular/flex-layout/wiki/Responsive-API). Пример:

     <ng-container matColumnDef="date">
        <th
          *matHeaderCellDef
          mat-header-cell
          mat-sort-header
          fxShow
          fxHide.lt-sm
        >
          Data
        </th>
        <td *matCellDef="let element" mat-cell fxShow fxHide.lt-sm>
          {{ element.date | date: "dd/MM/yyyy" }}
        </td>
        <td *matFooterCellDef mat-footer-cell fxShow fxHide.lt-sm>Total</td>
      </ng-container>

В этом случае будет скрываться на экране меньше, чем маленький (lt-sm).

Ответ 7

Если вы собираетесь скрыть строку с помощью некоторого изменчивого условия, я предлагаю следующее:

// css
.hidden-row {
  display: none;
}

// html
<ng-container matColumnDef="importDate">
  <mat-header-cell *matHeaderCellDef [ngClass]="showColumn()">
      Date
  </mat-header-cell>
  <mat-cell *matCellDef="let element" [ngClass]="showColumn()">
      {{element?.importDate}}
  </mat-cell>
</ng-container>

// ts
showColumn(): string {
  return this.someService.hasAccess() ? null : 'hidden-row';
}

Ответ 8

Предлагаемое решение @Джона Смита не работало для меня. Вместо этого я использовал эту настройку:

 // css
 .hidden-item {
   display: none;
 }

 // html
 <ng-container matColumnDef="importDate">
   <mat-header-cell *matHeaderCellDef [ngClass]="{'hidden-item': showColumn()}"> Date
   </mat-header-cell>
   <mat-cell *matCellDef="let element" [ngClass]="{'hidden-item': showColumn()}"> {{element?.importDate}}
   </mat-cell>
 </ng-container>

 // ts
 showColumn(): boolean {
   return this.someService.hasAccess();
 }

Ответ 9

У меня была та же проблема, когда пользователь мог отображать или скрывать столбцы с помощью флажка. Я решаю свою проблему через трубу, например:

@Component({
  selector: "app-dynamic-table",
  template: '
    <mat-checkbox *ngFor="let column of columns" [(ngModel)]="column.show">{{column.name | titlecase}}</mat-checkbox>
    <mat-table #table [dataSource]="dataSource">
      ....
      <mat-header-row *matHeaderRowDef="displayedColumns | toggleColumns:columns;"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns | toggleColumns:columns;"></mat-row>
    </mat-table>
  '
})
export class DynamicTableComponent {
  private _columns = [
    {
      name: "date",
      show: true
    }, {
      name: "selected",
      show: true
    }, {
      name: "id",
      show: true
    }, {
      name: "location",
      show: true
    }
  ];

  get columns() { return this._columns; }
  get displayedColumns(): string[] { return this._columns.map(c => c.name); }
}

@Pipe({
  name: "toggleColumns"
})
export class ToggleColumnsPipe implements PipeTransform {
  transform(displayedColumns: string[], columns): string[] {
    displayedColumns = columns.filter(c => !!c.show).map(c => c.name);
    return displayedColumns;
  }

}

Теперь вам просто нужно изменить атрибут show столбца от true <=> false чтобы столбец исчез, если show: false и он будет отображаться, когда show: true. Я делаю это, как вы видите, с помощью mat-checkbox.

Ответ 10

Там, где написано какой-то грязный код для кодов html и css, скажем, укажите каждый столбец с идентификатором, затем установите правило (например, display: none;), чтобы скрыть их, когда это необходимо. Учитывая, что таблица будет создаваться по строкам, а не по столбцу.

Но правильный способ - это простой и простой способ изменения структуры столбцов в компоненте (например, при возникновении события).

Ответ 11

Для моего случая приведенный ниже код CSS не работает.

display:none

Благодаря Роду Астраде, я пытаюсь добавить приведенный ниже код в mat-header-cell, затем работает, тогда он работает!

[style.display]="'none'"

как в следующем примере:

      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef [style.display]="'none'">Id</mat-header-cell>
        <mat-cell *matCellDef="let element" [style.display]="'none'"> {{element.id}} </mat-cell>
      </ng-container>

Ответ 12

Это возможно, как объяснено в этом неправильном вопросе: https://github.com/angular/material2/issues/8944

Посмотреть:

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

учебный класс:

displayedColumns = ['tab1', 'tab2', 'tab3'];

но в конструкторе:

if (this.removeOneColumn) this.displayedColumns = ['tab1', 'tab3'];