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

作爲每docs，hidden不是一個 '輸入' 屬性在選擇器ngb-tab上定義。如果你只是想使它hidden（現在仍然在DOM元素，請嘗試使用ngStyle該元素在display風格（見this更多信息上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' 

如果你想要的元素從DOM完全刪除的只是被隱藏而應使用*ngIf代替，但由於沒有2個結構指令（在這種情況下ngFor和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

，並加入到styles.css中

.hidden { display: none !important; }

M.