角度ngbootstrapタブをプログラムでページロード時に選択

Question

私の角度2では、ngbootstrapからナビゲーションタブを実装しています。読み込み時にアクティブなタブを変更したいと思います。これで、デフォルトで[オファー]タブがアクティブに設定されます。 「選択」メソッドでは、[オーダー]タブをアクティブに設定します。

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

with this.tabs.select（ "Orders"）; OnInit/AfterContentInitタブセットがまだレンダリングされておらず、OnAfterViewInitにエラーがあります。チェックされた後に式が変更されました。以前の値： 'true'現在の値： 'false' DOM要素は既にレンダリングされており、変更できないためです。あなたのngAfterContentInitライフサイクルフックで

<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を注入し、（ChangeDetectorRef.detectChangesを呼び出すことができるかどうか確認してください） 。この回答を統合する

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

ソリューションEDIT

は、問題を解決しました。 AfterViewInitは次のようになります。

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