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

发布时间：2020-12-17 17:43:40 所属栏目：安全来源：网络整理

导读：我使用Angular Material选项卡显示几个带有循环ng的选项卡. 这工作正常但是现在我想在初始化时打开第二个选项卡而不是第一个选项卡. 因此,我在mat-tab-group中添加了selectedIndex属性,但它不起作用,仍然在第一个选项卡上继续打开. HTML mat-tab-group class

我使用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",{name: "R2",values: "52"}]

解决方法

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

>通过声明以下属性,获取组件中MatTabGroup实例的引用(模板包含mat-tab-group的组件)：

@ViewChild(MatTabGroup) tabGroup: MatTabGroup;

>然后在更新选项卡的新值时,在subscribe方法调用中设置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);
      }
    );
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!