angular2材质表隐藏列

Question

我有以下angular2材料表

<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但它不起作用.怎么做？

Answer 1

不需要任何指令。

只是使用

[隐藏] 它将在 html 中工作 ex:[hidden]="show" 并在 ts 文件中将 show 设置为布尔值。

我的 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>

Answer 2

执行此操作的角度方式是更新传递给行模板的列:

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

Answer 3

在要隐藏的列中添加以下内容：

[style.display]="'none'"

您应该同时添加到mat-h​​eather-cell和mat-cell。

Answer 4

最后我找到了一种隐藏列而不更改列映射的方法。我们需要创建一个属性指令，通过该指令我们可以设置元素的显示属性。

显示列指令：

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 组件中使用该指令：

<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

Answer 5

我正在使用 Angular Flex 响应式 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) 中。

Answer 6

唯一可能的解决方案似乎是更改组件类中显示的列

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