时间戳

首页 > 解决方案 > 如何从打字稿文件中隐藏 mat-checkbox

angular - 如何从打字稿文件中隐藏 mat-checkbox

问题描述

我需要根据在我的应用程序中更改的选项卡选择隐藏文件中的mat-checkbox控件。typescript

这是html文件代码

<mat-checkbox (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

同一html文件中的选项卡

<div>    
<mat-tab-group #tabRef (selectedTabChange)="tabChanged(tabRef.selectedIndex)">
  <mat-tab label="ALL"></mat-tab>
  <mat-tab label="Actvie"></mat-tab>
  <mat-tab label="Inactive"></mat-tab>
  <mat-tab label="Deliverted"></mat-tab>
</mat-tab-group>    
</div>

当我的标签更改呼叫时，我需要隐藏复选框

tabChanged(index)
{

}

我怎样才能做到这一点

标签： angulartypescriptangular-material

解决方案

您可以将 ngModel 与复选框一起使用，如下所示：

<mat-checkbox *ngIf="show" (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

在 tabChanged 事件中，您可以根据已触发的选项卡更改显示值：

show: boolean = true;

tabChanged(index)
{
   if(index == "your tab index"){
     this.show = false;
   }

}

使用 ViewChild 的另一种方法：

<mat-checkbox #checkbox (change)="OnChangeRed($event)" id="check1" class="example-margin" [checked]="matCheckboxRed"></mat-checkbox>

并在 ts 文件中：

@ViewChild('checkbox') el:ElementRef;

    tabChanged(index)
    {
       if(index == "your tab index"){
     this.el.nativeElement.style.display='none';
       }
    }

推荐阅读