Question

在我的Angular 2中，我实现了ngbootstrap的导航标签。在加载时我想更改活动选项卡。所以现在默认情况下，＆＃39;优惠＆＃39;选项卡已设置为活动状选择＆＃39;选择＆＃39;方法我想设置＆＃39;订单＆＃39;标签为有效。

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

使用this.tabs.select（＆＃34; Orders＆＃34;）;在 OnInit / AfterContentInit 中，标签集尚未呈现，在OnAfterViewInit中，我收到错误表达式在检查后已更改。以前的价值：＆＃39; true＆＃39;。当前值：＆＃39; false＆＃39; ，因为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（）。

＆＃13;

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

＆＃13;

解决方案编辑

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

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

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

1 个答案: