Angular ngbootstrap Wählen Sie Registerkarten programmgesteuert beim Laden der Seite

Question

In meinem Angular 2 implementiere ich die Navigationsregisterkarten von ngbootstrap. Zur Ladezeit möchte ich die aktive Registerkarte ändern. So ist jetzt standardmäßig die Registerkarte 'Angebote' aktiviert. Mit der 'Select'-Methode möchte ich die Registerkarte' Aufträge 'als aktiv festlegen.

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

Mit this.tabs.select ("Orders"); in OnInit/AfterContentInit das Tabset ist noch nicht gerendert und in OnAfterViewInit bekam ich den Fehler Ausdruck wurde geändert, nachdem es überprüft wurde. Vorheriger Wert: 'wahr'. Aktueller Wert: 'false', weil das DOM-Element bereits gerendert ist und nicht geändert werden kann.

<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

Ich bin nicht sicher, ob dies die beste Praxis ist oder nicht, sondern um diesen Fehler loszuwerden Sie ChangeDetectorRef in Ihrem Konstruktor injizieren können und rufen ChangeDetectorRef.detectChanges() in der ngAfterContentInit Lifecycle Haken .

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

SOLUTION EDIT

diese Antwort Integration das Problem gelöst. Das AfterViewInit sieht jetzt so aus:

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