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.