ngb-tab [hidden] = "tab.hidden" ne fonctionne pas

Question

Pourquoi ne fonctionne pas [hidden] = "tab.hidden"?

<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId"> 
 
     <ngb-tab *ngFor="let tab of tabs" [id]="tab.id" [disabled]="tab.disabled" [hidden]="tab.hidden"> 
 
      <ng-template ngbTabTitle>{{tab.title}}</ng-template> 
 
      <ng-template ngbTabContent> 
 
      <p style="margin: 20px">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth 
 
       master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh 
 
       dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum 
 
       iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
 
      </ng-template> 
 
     </ngb-tab> 
 
     </ngb-tabset>

M.

Answer 1

Selon le docs, hidden n'est pas une propriété 'entrée' défini sur le sélecteur ngb-tab. Si vous voulez simplement faire hidden (et ont encore l'élément DOM, essayez de définir le style display sur cet élément en utilisant ngStyle (voir this pour plus d'informations sur ngStyle),

<ngb-tab *ngFor="let tab of tabs" [id]="tab.id" [disabled]="tab.disabled" [ngStyle]="{'display': tab.hidden ? 'none' : 'block'}"> 
// if the default style is not 'block' then assign appropriate style to the else-case for 'display' style above, 
// like may be 'inline-block' instead of 'block' 

Si vous voulez l'élément à supprimer purement et simplement de DOM au lieu d'être caché, utilisez *ngIf à la place. Mais puisqu'aucune 2 directives structurelles (ngFor et ngIf dans ce cas) peuvent être présents ensemble sur un élément, envelopper le ngFor extérieur dans un ng-container comme celui-ci,

<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId"> 
<ng-container *ngFor="let tab of tabs"> 
    <ngb-tab [id]="tab.id" [disabled]="tab.disabled" *ngIf="tab.hidden"> 
    <ng-template ngbTabTitle>{{tab.title}}</ng-template> 
    <ng-template ngbTabContent> 
    <p style="margin: 20px"> 
     Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. 
    </p> 
    </ng-template> 
    </ngb-tab> 
</ng-container> 
</ngb-tabset> 

Pour que tous ces cas fonctionnent, vous devez également définir la propriété hidden de chaque élément de l'objet tabs sur une valeur booléenne correspondante de true ou de false.

Answer 2

ensemble dans le composant tab.hidden = true ou false [hidden]="true" or [hidden]="false"

Answer 3

Ma solution modifier tabset.js - ajouter 'hidden': [{ type: Input },],:

`NgbTab.propDecorators = { 
'id': [{ type: Input },], 
'title': [{ type: Input },], 
'disabled': [{ type: Input },], 
'hidden': [{ type: Input },], 
'contentTpl': [{ type: ContentChild, args: [NgbTabContent,] },], 
'titleTpl': [{ type: ContentChild, args: [NgbTabTitle,] },], 
};` 

ajouter à [class.hidden]=\"tab.hidden\" modèle:

template: "\n <ul [class]=\"'nav nav-' + type + (orientation == 'horizontal'? ' ' + justifyClass : ' flex-column')\" role=\"tablist\">\n
<li class=\"nav-item\" *ngFor=\"let tab of tabs\" [class.hidden]=\"tab.hidden\">\n

et ajouter à styles.css

.hidden { display: none !important; }

M.