Mat-tab material angular6 selectedIndex no funciona con * ngFor

Alexa, miembro de nuestro staff, nos hizo el favor de redactar este tutorial porque domina muy bien dicho tema.

Solución:

Puede configurar el selectedIndex después de que sus datos de servicio estén disponibles. Necesitas hacer los siguientes cambios:

1. Consigue una referencia a MatTabGroup instancia en su componente (el componente cuya plantilla contiene mat-tab-group) declarando a continuación attribute:

   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
   

2. Luego establezca el índice seleccionado en subscribe llamada al método mientras se actualiza el nuevo valor para tabs

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

En general, su componente puede parecerse a lo siguiente:

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);
      
    );
  

solo lee el [selectedIndex] entrada cuando el componente se crea por primera vez. Luego, el enlace de salida (selectedIndex) le permite realizar un seguimiento de los cambios de pestaña.

Creo que estás configurando el valor. 1 antes de que exista esa pestaña.

El problema es ese *ngFor está creando a los niños mat-tab componentes después. Cuándo se le notifica que los niños han cambiado por defecto a la primero pestaña.

La única solución alternativa que conozco es activar un cambio en el [selectedIndex] Unión después el niño se han creado los componentes.

Actualice su componente para tener una propiedad:

public selectedIndex: number = 0;

Use esto como enlace para la entrada de índice seleccionado:

Inyecte estas dependencias en su componente:

  public constructor(private change: ChangeDetectorRef) 

Actualice su suscripción para cambiar el índice seleccionado después los *ngFor ha terminado de actualizar el documento.

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();
    );
);

Puntuaciones y reseñas

Si haces scroll puedes encontrar las explicaciones de otros administradores, tú asimismo tienes la libertad de mostrar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador