Question

我显示了几个带有循环的选项卡ngFor使用Angular Material选项卡。这可以正常工作，但是现在我想在初始化时打开第二个选项卡，而不是第一个选项卡。因此，我在mat-tab-group组中添加了selectedIndex属性，但是它不起作用，并且仍然在第一个选项卡上继续打开。

HTML

<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)" [selectedIndex]="1">
  <mat-tab label={{tab.name}} *ngFor="let tab of tabs; let index = index">
    <div>
      Values: {{tab.values}}
    </div>
  </mat-tab>
</mat-tab-group>

使用服务从ngOnInit的服务器中获取变量“ tabs” ，如下所示：

组件

this.api.getDataset(this.route.snapshot.params["experimentid"]).subscribe(
  res => {
    this.tabs = res;
  },
  err => {
    console.log(err);
  }
);

我认为它来自这里，因为如果我手动设置选项卡而不请求服务器，它将起作用。像这样：

this.tabs = [{name: "X2", values: "52"}, {name: "Z2", values: "52"}, {name: "R2", values: "52"}]

Answer 1

您可以在服务数据可用后设置selectedIndex。您需要进行以下更改：

通过声明以下属性来获取对组件（其模板包含MatTabGroup的组件中的mat-tab-group实例的引用：
```
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
```

然后在更新subscribe的新值的同时，在tabs方法调用中设置selectedIndex

.subscribe(
  res => {
    this.tabs = res;
    this.tabGroup.selectedIndex = 1;
  },

总体而言，您的组件可能看起来如下所示：

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

@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html',
  styleUrls: ['tab-group-basic-example.css'],
})
export class TabGroupBasicExample implements OnInit {

  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;

  tabs = [];

  ngOnInit() {
    this.api.getDataset(experimentId).subscribe(
      res => {
          this.tabs = res;
          this.tabGroup.selectedIndex = 1;
      },
      err => {
          console.log(err);
      }
    );
  }
}

Answer 2

<mat-tab-group>仅在首次创建组件时读取[selectedIndex]输入。之后，使用输出绑定(selectedIndex)可以跟踪选项卡的更改。

我认为您是在该选项卡存在之前设置值1。

问题在于*ngFor之后正在创建子项mat-tab。当通知<mat-tab-group>子项已更改时，它默认为 first 标签。

我知道的唯一解决方法是在创建子[selectedIndex]子组件之后触发对<mat-tab>绑定的更改。

更新您的组件以使其具有属性：

public selectedIndex: number = 0;

将其用作selectedIndex输入的绑定：

<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)" [selectedIndex]="selectedIndex">

将这些依赖项注入您的组件中：

public constructor(private change: ChangeDetectorRef, private zone: NgZone) {}

更新您的订阅以在*ngFor完成文档更新之后更改所选索引。

this.api.getDataset(this.route.snapshot.params["experimentid"]).subscribe(res => { this.tabs = res; // wait for ngFor to finish window.setTimeout(()=>{ // run inside Angular this.zone.run(()=>{ this.selectedIndex = 1; // force change detection this.change.detectChanges(); }); }); });

Mat-tab材质angular6 selectedIndex不适用于* ngFor

2 个答案: