如何在模态打开时将活动设置为第一个选项卡

Question

这是我的代码：

<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，所以我说了这样的话，当这个节目被调用时（模态是开放的）让我们设置两个classess，show和active，但是这个不幸的是不起作用...

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

  }

谢谢你们干杯

Answer 1

请我们[ngClass] =“{'有效'：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'
}