隱藏角材料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