动态启用后的 ngb-tab Select 选项卡

Question

我有 2 个选项卡。最后一个在初始化时被禁用。单击位于第一个选项卡中的自定义按钮后，最后一个选项卡应启用并 select 它。

但现在它启用了选项卡，但没有 select。

我只是尝试更改样式，因为它似乎已被禁用，但在 ngb-tab 上使用 [ngStyle] 或 [class] 似乎不起作用。我还尝试通过 ngDoCheck.

导航（使用 select）

模板：

<ngb-tabset #tabSet="ngbTabset" [justify]="'justified'" (tabChange)="tabChange($event)">
    <ngb-tab id="tab-1" title="Step 1">
      <ng-template ngbTabContent>
        First
      </ng-template>
    </ngb-tab>
    <ngb-tab id="tab-2" title="Step 2" [disabled]="disableEnd">
        <ng-template ngbTabContent>
            Conclusion
        </ng-template>
    </ngb-tab>
</ngb-tabset>

<button (click)="goToEnd()" *ngIf="actualPage === 1">Send</button>

.ts:

@ViewChild('tabSet', {static: false}) tabSet;
pages: string[] = ["tab-1", "tab-2"];
disableEnd:boolean = true;

  goToEnd () : void {
    this.disableEnd = false;
    this.tabSet.select(this.pages[1]);
  }

我希望该选项卡激活并select编辑，以供查看。

Answer 1

我会尝试使用数组的自然索引： this.tabSet.select(1);

如果您想按名称使用它，请使用 for 检索字符串的索引。

Answer 2

在 goToEnd(tabSet)

中传递模板引用

这样试试：

模板：

<button (click)="goToEnd(tabSet)" *ngIf="actualPage === 1">Send</button>

打字稿：

 goToEnd(tabSet): void {
    this.disableEnd = false;
    var that = this
    setTimeout(function () {
      tabSet.select(that.pages[1]);
    }, 1);
  }

Working Demo

动态启用后的 ngb-tab Select 选项卡

ngb-tab Select tab after enabling it dynamically

tabs

ng-bootstrap

angular