Question

我有2个标签。最后一个在init上被禁用。单击第一个选项卡中的自定义按钮后，最后一个选项卡应启用并选择它。

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

我尝试只是更改样式，因为它似乎已被禁用，但是在[ngStyle]上使用ngb-tab或[class]似乎无效。我还尝试通过ngDoCheck导航（使用选择）。

模板：

<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]);
  }

我希望激活并选中该标签，以供查看。

Answer 1

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

Answer 2

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

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

ngb-tab动态启用后选择标签

2 个答案: