Question

我需要根据应用程序中选项卡的更改来隐藏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)
{

}

我该怎么做

Answer 1

您可以将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';
       }
    }

如何从打字稿文件隐藏垫复选框

1 个答案: