角材を隠す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