Блог

Мне нужно скрыть элемент 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)
{

}
  

Как я могу это сделать

Вы можете использовать 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';
       }
    }