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

Question

我使用Angular Material选项卡显示几个带有循环ng的选项卡.这工作正常但是现在我想在初始化时打开第二个选项卡而不是第一个选项卡.因此,我在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在服务数据可用后进行设置。您需要进行以下更改：

1. 通过声明以下属性，获取对MatTabGroup组件（模板中包含的组件mat-tab-group）中实例的引用：

   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
   

2. 然后subscribe在更新方法的新值时在方法调用中设置selectedIndextabs

   .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>通知子项已更改时，它默认为第一个选项卡。

我知道的唯一变通方法是在创建子组件之后触发对[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) {}

完成文档更新后，更新您的订阅以更改选定的索引*ngFor。

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