ngb-tab [hidden] = "tab.hidden"が機能しない

Question

[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

をStyles.cssを追加する、hiddenは '入力' プロパティはありませんセレクタngb-tabに定義されています。あなたは、単に（それhiddenようにしたいと、まだDOMの要素を持っている場合は、ngStyleを使用して、その要素にdisplayスタイルを設定してみてください（ngStyle詳細はthisを参照）、

<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' 

あなたは要素をしたいならばNO 2つの構造ディレクティブ（この場合ngForとngIf）が要素上に一緒に存在することができないので、単に隠されるのではなく、DOMから完全に除去すること代わり*ngIf使用。しかし、このようなng-container外側ngForラップ

<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> 

これらすべての場合には、tabsオブジェクト内の各要素のhiddenプロパティを、対応するブール値のtrueまたはfalseに設定する必要があります。

Answer 2

コンポーネントtab.hiddenでセット= trueまたはfalse [hidden]="true" or [hidden]="false"

Answer 3

私のソリューションはtabset.jsを修正 - '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,] },], 
};` 

テンプレートに[class.hidden]=\"tab.hidden\"を追加：

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

およびdocs 1として

.hidden { display: none !important; }

M.