Question

我只是试图隐藏一个Angular材质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

您只需更改组件中的列映射。在其中添加或删除任何键都会导致表显示或隐藏相应的列。

不要尝试使用 CSS或HTML解决方案，例如使用hidden属性或display: none; CSS规则，它们会将代码变成肮脏且容易出错的代码。

Answer 2

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

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

Answer 3

只需删除标题行。例如，只有一列“标题”

<ng-container matColumnDef="title">
   <td *matCellDef="let item" mat-cell>{{item}}</td>
</ng-container> 
<tr matRowDef="let row;columns: ['title'];" mat-row></tr>

隐藏Angular材质2表，特定标题及其列

3 个答案: