Dynami c вкладки с использованием angular 6 - PullRequest
Новая
       30

Dynami c вкладки с использованием angular 6

3 голосов
/ 12 февраля 2020

Я использую tabset для вкладок.

Например: https://stackblitz.com/edit/ngx-bootstrap-tabs-manual?file=app%2Fapp.module.ts

Мне нужно динамически закрывать и добавлять вкладки, используя ngx- bootstrap, tabset.

Может кто-нибудь помогите мне для динамических c вкладок.

1 Ответ

3 голосов
/ 15 февраля 2020

Пожалуйста, замените ниже HTML код в app.component. html этот файл для динамического c вкладка 

<alert type="success">
  <strong>Tabs!</strong> you can enable/disable tab switching with the button here.
</alert>

<label for="switcher">Disable tab switching: <input type="checkbox" [(ngModel)]="disableSwitching"></label>
<p>Tab switching is <strong>{{ disableSwitching ? 'disabled' : 'enabled ' }}</strong>.</p>
<hr>
<tabset #tabset>
  <tab *ngFor="let tab of tabsetData" [heading]="tab.tabtitle" [innerHTML]="tab.tabContent"></tab>
</tabset>

<button (click)='goto(0)'>Go to 1</button>
<button (click)='goto(1)'>Go to 2</button>
<button (click)='goto(2)'>Go to 3</button>

Для app.component.ts код файла 

import { Component, ViewChild , ViewChildren , QueryList , AfterViewInit } from '@angular/core';
import { TabsetComponent, TabDirective } from 'ngx-bootstrap/tabs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
  disableSwitching: boolean;

  @ViewChild('tabset') tabset: TabsetComponent;
  tabsetData = [{
    tabtitle: "First Tab",
    tabContent: "<p>First Tab</p>"
  },{
    tabtitle: "Second Tab",
    tabContent: "<p>Second Tab</p>"
  },{
    tabtitle: "Third Tab",
    tabContent: "<p>Third Tab</p>"
  }];
  ngAfterViewInit(){
    console.log(this.tabset.tabs);
  }

  goto(id){
    this.tabset.tabs[id].active = true;
  }
}

Надеюсь, это поможет! Спасибо.

...