Как повторно вызвать анимацию слайдов группы вкладок, когда вкладки удаляются динамически - PullRequest
Новая
       11

Как повторно вызвать анимацию слайдов группы вкладок, когда вкладки удаляются динамически

0 голосов
/ 01 октября 2018

У меня есть кейс с угловым компонентом 6.4.7 материал mat-tab-group, в котором клиент может динамически удалять некоторые элементы из своего array[].Когда выбрана вкладка, которая показана справа от списка, и элементы удалены, анимация слайдов в этот момент больше не работает.Есть ли способ повторно запустить анимацию в таком случае?

Пример кода на Stackblitz

https://stackblitz.com/edit/angular-88gk9w

Код контроллера 

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'tab-group-dynamic-example',
  templateUrl: 'tab-group-dynamic-example.html',
  styleUrls: ['tab-group-dynamic-example.css'],
})
export class TabGroupDynamicExample {
  tabs = ["Item000", "Item001", "Item002", "Item003", "Item004", "Item005", "Item006", "Item007", "Item008", "Item009", "Item010", "Item011", "Item012", "Item013", "Item014", "Item015", "Item016", "Item017", "Item018", "Item019", "Item020", "Item021", "Item022", "Item023", "Item024", "Item025", "Item026", "Item027", "Item028", "Item029", "Item030", "Item031", "Item032", "Item033", "Item034", "Item035", "Item036", "Item037", "Item038", "Item039", "Item040", "Item041", "Item042", "Item043", "Item044", "Item045", "Item046", "Item047", "Item048", "Item049", "Item050", "Item051", "Item052", "Item053", "Item054", "Item055", "Item056", "Item057", "Item058", "Item059", "Item060", "Item061", "Item062", "Item063", "Item064", "Item065", "Item066", "Item067", "Item068", "Item069", "Item070", "Item071", "Item072", "Item073", "Item074", "Item075", "Item076", "Item077", "Item078", "Item079", "Item080", "Item081", "Item082", "Item083", "Item084", "Item085", "Item086", "Item087", "Item088", "Item089", "Item090", "Item091", "Item092", "Item093", "Item094", "Item095", "Item096", "Item097", "Item098", "Item099", "Item100", "Item101", "Item102", "Item103", "Item104", "Item105", "Item106", "Item107", "Item108", "Item109", "Item110", "Item111", "Item112", "Item113", "Item114", "Item115", "Item116", "Item117", "Item118", "Item119", "Item120", "Item121", "Item122", "Item123", "Item124", "Item125", "Item126", "Item127"];
  selected = new FormControl(127);

  removeTab(index: number) {
    this.tabs.splice(0, 42);
  }
}

Код шаблона 

<div>
  <span class="example-input-label"> Selected tab index: </span>
  <mat-form-field>
    <input matInput type="number" [formControl]="selected" value="127">
  </mat-form-field>
</div>


<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
  </mat-tab>
</mat-tab-group>

<button mat-raised-button
        class="example-delete-tab-button"
        [disabled]="tabs.length === 1"
        (click)="removeTab(index)">
  Remove Bunch of Tabs
</button>
...