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

执行此操作的有条理方式是update the columns passed to your row template：

<强> 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 2

要隐藏的列，请添加：

[style.display]="'none'"

你应该添加mat-heather-cell和mat-cell。

Answer 3

最后，我发现了一种隐藏列而无需更改列映射的方法。我们需要创建一个属性指令，通过这个指令我们可以设置元素的display属性。

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

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

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

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

Answer 5

不需要任何指令。

只需使用

<强> [隐藏] 它会工作例如：[隐藏] =＆＃34;显示＆＃34;在HTML中和在ts文件中将show设置为boolean。

我的HTML代码：

部门 {{element.department}}

Answer 6

我正在使用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 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';
}

Answer 8

建议的解决方案@John Smith并没有为我工作。相反，我使用了这个调整：

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

Answer 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上所做的那样。

Answer 10

有一种方法可以同时为html和css代码编写一些脏代码，例如，为每个列指定一个标识符，然后设置一个规则（例如display: none;）以在必要时隐藏它们。 考虑到表将逐行而不是逐列生成。

但是正确的方法是最常见且最简单的方法，即 更改组件中的列映射 （例如，事件触发时）

Answer 11

对于我来说，以下CSS代码无法正常工作。

display:none

感谢Rod Astrada，我尝试将下面的代码添加到 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>

Answer 12

例如：

在HTML中：

<button mat-raised-button color="primary" (click)="show_hide_details()">
    <span *ngIf="showHideDetails== true">Hide Details</span>
    <span *ngIf="showHideDetails== false">Show Details</span>
</button>

<ng-container matColumnDef="Cost">
    <th mat-header-cell *matHeaderCellDef mat-sort-header
    [ngStyle]="{display: showHideDetails === true? 'table-cell' : 'none'}">{{'Cost' | translate}}</th>

    <td mat-cell *matCellDef="let element" [ngStyle]="{display: showHideDetails === true? 
     'table-cell' : 'none'}">{{element.cost}} </td>
</ng-container>

在TS中：

showHideDetails: boolean = false;

show_hide_details() {
this.showHideDetails= !this.showHideDetails;
}

Answer 13

这可能是错误的问题所解释的：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'];

angular2材质表隐藏列

13 个答案: