angular2材质表隐藏列 [英] angular2 material table hide column

问题描述

我有以下angular2材质表

I have the following angular2 material table

<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>
        ......

我需要通过一些布尔条件隐藏表中的一列.是否可以不更改组件中的列映射?

I need to hide a column in the table by some boolean condition. Is it possible without changing columns map in my component?

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

我尝试使用 *ngIf 但它不起作用.如何做到这一点?

I tried to use *ngIf but it doesn't work. How to do that?

推荐答案

不需要任何指令.

就用

[隐藏]它会工作例如:[隐藏]="显示"在 html和在 ts 文件中将 show 设置为 boolean.

[hidden] it will work ex:[hidden]="show" in html and set show to boolean in ts file.

我的html代码:

<ng-container matColumnDef="department" >
  <mat-header-cell [hidden]="show" *matHeaderCellDef> 
    Department 
  </mat-header-cell>
  <mat-cell [hidden]="show" *matCellDef="let element">
    {{element.department}}
  </mat-cell>
</ng-container>

这篇关于angular2材质表隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！