Angular ngbootstrap select 选项卡在页面加载时以编程方式

Question

在我的 Angular 2 中，我正在从 ngbootstrap 实现导航选项卡。在加载时我想更改活动选项卡。所以现在默认情况下 'Offers' 选项卡设置为活动状态。使用 'select' 方法，我想将 'Orders' 选项卡设置为活动。

@ViewChild('tabs')
private tabs: NgbTabset;

与this.tabs.select("Orders");在 OnInit/AfterContentInit 中，选项卡集尚未呈现，在 OnAfterViewInit 中，我收到错误 Expression has changed after it was checked。以前的值：'true'。当前值：'false'，因为DOM元素已经渲染，无法更改。

<ngb-tabset #tabs id="detailTab">
<ngb-tab id="Offers" title="Offers">
<ng-template ngbTabContent>
  <br />
  <div class="row">
    <table class="table" *ngIf="_offers; else nooffers">
      <tr>
        <th></th>
        <th>Offer number</th>
        <th>When/who created</th>
        <th>Price</th>
        <th>#Del weeks</th>
      </tr>
      <tr *ngFor='let offer of _offers'>
        <td style="padding: 10px"><button id="detail" (click)="clicked(offer)" [routerLink]="['/offers', offer.salnr]" title="Detail offers" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td>
        <td>{{ offer.salnr }}</td>
        <td>{{ offer.WhenWhoCreated }}</td>
        <td>{{ offer.price }} {{ offer.pricecurrency }}</td>
        <td>{{ offer.delweeks }}</td>
      </tr>
    </table>
    <ng-template #nooffers>No offers</ng-template>
  </div>
</ng-template>
</ngb-tab>
<ngb-tab id="Orders" title="Orders">
<ng-template ngbTabContent>
  <br />
  <div class="row">
    <table class="table" *ngIf="_orders; else noorders">
      <tr>
        <th></th>
        <th>Order number</th>
        <th>When/who created</th>
        <th>Price</th>
        <th>Backorder</th>
        <th>Available</th>
        <th>Partial delivery</th>
        <th>Expected Del Date</th>
      </tr>
      <tr *ngFor='let order of _orders'>
        <td style="padding: 10px"><button id="detail" (click)="clicked(order)" [routerLink]="['/orders', order.salnr]" title="Detail orders" class="glyphButton"><span class="glyphicon glyphicon-search"></span></button></td>
        <td><a href='{{ _linkToOrder }}{{_clientNr}}'>{{ order.salnr }}</a></td>
        <td>{{ order.WhenWhoCreated }}</td>
        <td>{{ order.price }} {{ order.pricecurrency }}</td>
        <td>{{ order.backorder }}</td>
        <td>{{ order.isAVAIL }}</td>
        <td>{{ order.partialdeliv }}</td>
        <td>{{ order.expdeldate }}</td>
      </tr>
    </table>
    <ng-template #noorders>No orders</ng-template>
  </div>
</ng-template>

Answer 1

我不确定这是否是最佳实践，但为了消除该错误，您可以在构造函数中注入 ChangeDetectorRef 并在 ngAfterContentInit 生命周期挂钩中调用 ChangeDetectorRef.detectChanges()。

  constructor(private _cdRef: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    this._cdRef.detectChanges();
  }

解决方案编辑

整合这个答案解决了这个问题。 AfterViewInit 现在看起来像这样：

ngAfterViewInit()
{
  if (sessionStorage.getItem("activeTab")) {
    this.tabs.select(sessionStorage.getItem("activeTab"));
    this.ref.detectChanges();
  }
}

Angular ngbootstrap select 选项卡在页面加载时以编程方式

Angular ngbootstrap select tabs programmatically at page load

tabs

typescript

ng-bootstrap

angular