У меня есть таблица угловых материалов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 но он не работает. Как это сделать?
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);
}
В колонку, которую вы хотите скрыть, добавьте следующее:
[style.display]="'none'"
Вы должны добавить и к мат-вересковой ячейке, и к мат-ячейке.
Наконец, я нашел способ скрыть столбец без изменения карты столбцов. Нам нужно создать директиву атрибута, через эту директиву мы можем установить свойство отображения элемента.
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
Единственное возможное решение, похоже, изменяет отображаемые столбцы в классе компонентов
displayedColumns = ['selected', 'id', ...];
нет необходимости в каких-либо директивах.
просто используйте
[hidden] он будет работать ex: [hidden] = "show" в html и установить show в boolean в ts файле.
мой html-код:
Я использую 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).
Если вы собираетесь скрыть строку с помощью некоторого изменчивого условия, я предлагаю следующее:
// 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';
}
Предлагаемое решение @Джона Смита не работало для меня. Вместо этого я использовал эту настройку:
// 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();
}
У меня была та же проблема, когда пользователь мог отображать или скрывать столбцы с помощью флажка. Я решаю свою проблему через трубу, например:
@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.
Там, где написано какой-то грязный код для кодов html и css, скажем, укажите каждый столбец с идентификатором, затем установите правило (например, display: none;), чтобы скрыть их, когда это необходимо. Учитывая, что таблица будет создаваться по строкам, а не по столбцу.
Но правильный способ - это простой и простой способ изменения структуры столбцов в компоненте (например, при возникновении события).
Для моего случая приведенный ниже код 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>
Это возможно, как объяснено в этом неправильном вопросе: 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'];