隐藏角材料2表，具体标题及其列

Question

我只是试图隐藏一个角材料2表statusid标题和列如下。

 <mat-table class="mat-elevation-z1" #table [dataSource]="dataSourceHE"> 
      <ng-container hidden="hidden" cdkColumnDef="statusid"> 
       <mat-header-cell hidden="hidden"> Id </mat-header-cell> 
       <mat-cell hidden="hidden"> {{row.statusid}} </mat-cell> 
      </ng-container> 
     </mat-table> 

但这不能正常工作。如果可能的话，我该怎么做？

Answer 1

解决的办法是创建一个属性指令，通过这个指令我们可以设置元素的显示属性。

showcolumn.directive.ts：

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

声明这个指令你的应用程序的模块或任何其他模块：

import {ShowColumnDirective} from './showcolumn.directive'; 
@NgModule({ 
    declarations: [ShowColumnDirective] 
}) 
export class AppModule {} 

现在我们可以使用该指令我们的表的HTML组件中：

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

下面是一个演示：https://plnkr.co/edit/Woyrb9Yx8b9KU3hv4RsZ?p=preview