SelectedIndex mat-tab 在 ngif 中不起作用

Question

美好的一天，我需要在第一個選項卡中初始化我的 mat-tab，但是當我使用 *ngIf 時我不能。

這是我的代碼：

html

<mat-tab-group dynamicHeight> 

  <mat-tab label="RENT" *ngIf="showRent"> 
  
    <div class="rc-result" > 
  
      <mat-card class="rc-available"> 
  
        {{rent}} 
  
      </mat-card> 
  
    </div> 
  
  </mat-tab> 
  
  <mat-tab label="FILTERS"> 
  
    <div class="rc-result" > 
    
        <mat-card class="rc-available"> 
    
          {{filters}} 
    
        </mat-card> 
    
    </div> 
  
  </mat-tab> 
  
</mat-tab-group> 

組件.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
    
import { MatTabGroup} from '@angular/material/tabs'; 
    

我的變量

  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup; 
  showRent: Boolean = false; 

在 ngOnInit 中。 取決於數據的來源，選項卡在 cero 或 one 中初始化。

        this._bridge.sentParams 
                     .subscribe((payload: any) => { 
                        this.myPayloadForm = payload. Data;  
                        if (this.myPayloadForm.home === 'ahri'){ 
                          this.showRent = false;                                                
                          this.tabGroup.selectedIndex = 1; 
                        } else { 
                          this.showRent = true;                                                          
                          this.tabGroup.selectedIndex = 0; 
                        }           
             }); 
       } 
    

感謝您的支持和有興趣幫助我

Answer 1

設置showRent的值后，設置selectedIndex並從ChangeDetectorRef調用detectChanges

this.showRent = false;                                                
this.tabGroup.selectedIndex = 1;
this.changeDetector.detectChanges();

在 component.ts 文件的構造函數中創建 ChangeDetectorRef object