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

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

0 голосов
/ 23 февраля 2019

Вот мой код: 

<div [id]="id" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-full">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h6 class="modal-title"</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <form #editViewForm="ngForm" (ngSubmit)="onSubmit()" id="editViewForm" autocomplete="off">
        <div id="tabs" class="modal-body">
          <!--Tabs Nav-->
          <ul class="nav nav-tabs nav-tabs-highlight mb-0">
            <li class="nav-item"><a href="#bordered-tab1" id="active_tab" class="nav-link active" data-toggle="tab">TAB 1</a></li>
            <li class="nav-item"><a href="#bordered-tab2" class="nav-link" data-toggle="tab">TAB 2</a></li>
            <li class="nav-item"><a href="#bordered-tab3" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
            <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab">TAB 4</a></li>
          </ul>
         </div>
        </form>
    </div>
</div>

Как я могу настроить TAB 1 на открытие при каждом открытии этого модального режима, если я закрываю модальный режим на tab3, я хочу, чтобы TAB 1 был активным при открытииСнова модал

Я пробовал это:

Я добавил на первую вкладку идентификатор, как это: active_tab, поэтому я сказал что-то вроде этого, когда вызывается это шоу (модал открывается) позволяет установить два класса: show и active, но это, к сожалению, не работает ... 

  show() {
    alert("ok");
    $('#active_tab' + this.id).addClass('active');
    $('#active_tab' + this.id).addClass('show');
    $('#' + this.id).modal('show');

  }

Спасибо, ребята, Cheers

1 Ответ

0 голосов
/ 23 февраля 2019

Пожалуйста, используйте [ngClass] = "{'active': tabName === 'tab1'}" 

 <ul class="nav nav-tabs nav-tabs-highlight mb-0">
        <li class="nav-item"><a href="#bordered-tab1" class="nav-link" [ngClass]="{'active': tabName === 'tab1'}" data-toggle="tab">TAB 1</a></li>
        <li class="nav-item"><a href="#bordered-tab2" [ngClass]="{'active': tabName === 'tab2'}" class="nav-link" data-toggle="tab">TAB 2</a></li>
        <li class="nav-item"><a href="#bordered-tab3" [ngClass]="{'active': tabName === 'tab3'}" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
        <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab" [ngClass]="{'active': tabName === 'tab4'}">TAB 4</a></li>
      </ul>

и для события ngOnInt компонента установите this.tabName = 'tab1'

tabName: string;  

ngOnInit() {
  this.tabName = 'tab1'
}
...