wake-up-neo.net

Mat-Tab-Material angle6 selectedIndex funktioniert nicht mit * ngFor

Ich zeige mehrere Registerkarten mit einer Schleife ngFor using Angular= Material tabs. Dies funktioniert ordnungsgemäß, aber jetzt möchte ich die zweite Registerkarte bei der Initialisierung und nicht die erste Registerkarte öffnen. Deshalb füge ich die Eigenschaft selectedIndex hinzu in der mat-tab-gruppe funktioniert es aber nicht und öffnet sich immer noch auf dem ersten tab.

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>

Die Variable "tabs" wird mit einem Dienst vom Server in ngOnInit wie folgt abgerufen:

KOMPONENTE 

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

Ich denke, es kommt von hier, weil, wenn ich die Vorsprünge manuell einstelle, ohne zum Bediener anzufordern, es funktioniert. So was:

this.tabs = [{name: "X2", values: "52"}, {name: "Z2", values: "52"}, {name: "R2", values: "52"}]
angularangular-materialmat-tab
7
PierBJX

Sie können selectedIndex einstellen, nachdem Ihre Servicedaten verfügbar sind. Sie müssen folgende Änderungen vornehmen:

  1. Erhalten Sie einen Verweis auf die MatTabGroup -Instanz in Ihrer Komponente (die Komponente, deren Vorlage mat-tab-group Enthält), indem Sie das folgende Attribut deklarieren:

    @ViewChild(MatTabGroup) tabGroup: MatTabGroup;

  2. Setzen Sie dann den selectedIndex im Methodenaufruf subscribe, während Sie den neuen Wert für tabs aktualisieren.

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

Insgesamt könnte Ihre Komponente wie folgt aussehen:

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> Liest nur die Eingabe [selectedIndex], Wenn die Komponente zum ersten Mal erstellt wird. Anschließend können Sie mit der Ausgabebindung (selectedIndex) Änderungen an Registerkarten verfolgen.

Ich denke, Sie setzen den Wert 1, Bevor dieser Reiter existiert.

Das Problem ist, dass *ngFor Die untergeordneten Komponenten mat-tab Anschließend erstellt. Wenn <mat-tab-group> Benachrichtigt wird, dass die untergeordneten Elemente geändert wurden, wird standardmäßig die erste Registerkarte verwendet.

Die einzige mir bekannte Problemumgehung besteht darin, eine Änderung der Bindung [selectedIndex] nach dem Kind <mat-tab> Auszulösen. Komponenten wurden erstellt.

Aktualisieren Sie Ihre Komponente, um eine Eigenschaft zu erhalten:

public selectedIndex: number = 0;

Verwenden Sie dies als Bindung für die selectedIndex-Eingabe:

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

Fügen Sie diese Abhängigkeiten in Ihre Komponente ein:

  public constructor(private change: ChangeDetectorRef) {}

Aktualisieren Sie Ihr Abonnement, um den ausgewählten Index zu ändern nachdem der *ngFor Die Aktualisierung des Dokuments abgeschlossen hat.

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