使用*ngIf时mat-tab的selectedIndex无法正常初始化问题求助

问题根源：*ngIf是条件渲染指令，只有当表达式为true时才会将元素添加到DOM中。你在ngOnInit里同时设置showRent和selectedIndex时，RENT标签还没被渲染，MatTabGroup的标签列表里还没有这个选项，所以selectedIndex的设置自然不会生效。

以下是几种可行的解决方案：

方案1：用ngAfterViewChecked钩子延迟设置 #

视图更新完成后（*ngIf渲染完成）再设置选中索引，同时加个标记避免重复执行：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, AfterViewChecked {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  showRent = false;
  private hasSetIndex = false;

  ngOnInit() {
    // 订阅payload逻辑
    this.yourPayloadService.getData().subscribe(payload => {
      this.showRent = payload.showRent;
    });
  }

  ngAfterViewChecked() {
    if (this.showRent && !this.hasSetIndex) {
      // 替换为RENT标签对应的实际索引
      this.tabGroup.selectedIndex = 0;
      this.hasSetIndex = true;
    }
  }
}

方案2：改用[hidden]替代*ngIf #

[hidden]只是隐藏元素，不会从DOM移除，标签页会始终存在于MatTabGroup的列表中，初始化时就能直接设置选中索引：

<mat-tab-group dynamicHeight>
  <mat-tab label="RENT" [hidden]="!showRent">
    <!-- RENT标签内容 -->
  </mat-tab>
  <mat-tab label="FILTERS">
    <!-- FILTERS标签内容 -->
  </mat-tab>
</mat-tab-group>

此时ngOnInit里的selectedIndex设置会直接生效：

ngOnInit() {
  this.yourPayloadService.getData().subscribe(payload => {
    this.showRent = payload.showRent;
    this.tabGroup.selectedIndex = 0;
  });
}

注意：[hidden]元素仍会被初始化，若标签内容复杂可能影响性能，适合简单场景。

方案3：用setTimeout延迟执行 #

借助setTimeout把设置索引的逻辑放到下一次事件循环，此时*ngIf已完成渲染：

ngOnInit() {
  this.yourPayloadService.getData().subscribe(payload => {
    this.showRent = payload.showRent;
    setTimeout(() => {
      this.tabGroup.selectedIndex = 0;
    }, 0);
  });
}

方案4：监听标签列表变化动态设置 #

用ViewChildren获取所有标签实例，监听标签列表的变化，当showRent为true时找到对应索引设置：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  @ViewChildren(MatTab) tabs!: QueryList<MatTab>;
  showRent = false;

  ngOnInit() {
    this.yourPayloadService.getData().subscribe(payload => {
      this.showRent = payload.showRent;
    });
  }

  ngAfterViewInit() {
    this.tabs.changes.subscribe(() => {
      if (this.showRent) {
        const rentTabIndex = this.tabs.toArray().findIndex(tab => tab.label === 'RENT');
        if (rentTabIndex !== -1) {
          this.tabGroup.selectedIndex = rentTabIndex;
        }
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者Esperanza Wiesse Gutierrez