Angular - mat-table：显示或隐藏 mat-cell 内容答案

【问题标题】：Angular - mat-table : show or hide mat-cell contentAngular - mat-table：显示或隐藏 mat-cell 内容
【发布时间】：2018-10-24 08:27:27
【问题描述】：

我有一个简单的 mat-table，用户接受或拒绝表格的行

<ng-container matColumnDef="accept">
  <mat-header-cell *matHeaderCellDef mat-sort-header>accept </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button (click)="accept(row)" mat-raised-button id="accept">accept</button>
  </mat-cell>
</ng-container>

<ng-container matColumnDef="reject">
  <mat-header-cell *matHeaderCellDef mat-sort-header>reject </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button (click)="reject(row)" mat-raised-button id="reject">reject</button> </mat-cell>
</ng-container>

因此，当该行已被接受或拒绝时，应该隐藏这些按钮

我试过了

 document.getElementById("accept").style.visibility = "hidden";

还有这个

 document.getElementById("accept").style.display = 'none';

但它们不起作用，我收到错误“无法读取 null 的属性 'style'”

我不知道问题是否足够清楚，但如果您需要更多信息，我会提供。

谢谢。

【问题讨论】：

How to change CSS styling from within Angular 2 Component的可能重复
不能在这种情况下在相应的按钮元素中使用属性绑定吗？喜欢<button [disabled]="someCondition" (click)="accept(row)" mat-raised-button id="accept">accept</button>
@AshrafulIslam 谢谢我会试试这个
请点击link 找到更好的使用html元素的方法。

标签： angular typescript

【解决方案1】：

你在 typescript 的什么地方设置样式？很可能它应该在 ngAfterViewInit 钩子中，因为按钮还没有在 DOM 中，如果您尝试在它之前设置样式。

【讨论】：

它在一个单独的函数 getData() 中，我在其中获取数据并将它们显示在表格上
如果在视图编译之前调用getData()，结果是一样的。

【解决方案2】：

您对此有一些方法： 1）将按钮的html更改为

<button #acceptButton (click)="accept(row,acceptButton)" mat-raised-button id="accept">accept</button>

然后在您的接受函数中，您可以访问元素本机属性像这样：

accept(row,buttonRef){
    buttonRef._elementRef.nativeElement.style.display = 'none'
bla bla logic
}

这会将按钮显示属性更改为无并隐藏按钮

2) 你可以将逻辑附加到 *ngIf 然后按钮将从 DOM 中删除例如here

【讨论】：

【解决方案3】：

添加到标签的 div/容器中：

[ngClass]="{ 'invisible': !displayTab}"

    .invisible * {
    visibility: hidden !important;
    transition: 0s !important;
}

    yourToggleFunction(): void{
     this.displayTab = !this.displayTab;
   }

然后你可以用(click)="yourToggleFunction()"切换它。

这可能会有所帮助： How to hide tab, but keep content of tab displayed in angular material in angular2?

【讨论】：

虽然此代码可能会解决问题，但 including an explanation 关于如何以及为何解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案添加解释并说明适用的限制和假设。