Question

我有一个简单的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'”

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

谢谢。

Answer 1

您在打字稿中的哪里设置样式？如果您想在样式之前设置样式，则很有可能应该将其放置在ngAfterViewInit钩中，因为按钮尚未在DOM中。

Answer 2

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

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

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

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

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

2）您可以将逻辑附加到* ng，如果该按钮将从DOM中删除示例here

Answer 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?

Angular-Mat-Table：显示或隐藏Mat-Cell内容

3 个答案: