web-dev-qa-db-ja.com

マットタブマテリアル、angular6 selectedIndexが* ngForで機能しない

Angular Materialタブを使用して、ngForループを使用して複数のタブを表示します。これは正常に機能しますが、最初のタブではなく、初期化時に2番目のタブを開きます。したがって、プロパティselectedIndexを追加します。 mat-tab-groupにありますが、機能せず、最初のタブで引き続き開きます。

[〜＃〜] 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>

変数 "tabs"は、次のようにngOnInitのサーバーからサービスとともに取得されます。

[〜＃〜] component [〜＃〜]

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"}]
angularangular-materialmat-tab
7
PierBJX

サービスデータが利用可能になったら、selectedIndexを設定できます。以下の変更を行う必要があります。

  1. 以下の属性を宣言して、コンポーネント（テンプレートにmat-tab-groupが含まれるコンポーネント）のMatTabGroupインスタンスへの参照を取得します。

    @ViewChild(MatTabGroup) tabGroup: MatTabGroup;

  2. 次に、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);
      }
    );
  }
}
8
Wand Maker

<mat-tab-group>は、コンポーネントが最初に作成されたときに[selectedIndex]入力のみを読み取ります。その後、出力バインディング(selectedIndex)を使用して、タブの変更を追跡できます。

そのタブが存在する前に1の値を設定していると思います。

問題は、*ngForが後で子mat-tabコンポーネントを作成していることです。 <mat-tab-group>に子が変更されたことが通知されると、デフォルトではfirstタブになります。

私が知っている唯一の回避策は、[selectedIndex]バインディングafter子<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) {}

サブスクライブを更新して、選択したインデックスを変更しますafter*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();
    });
});
6
Reactgular