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>

微米。

Answer 1

根据API Reference，hidden不是＆＃39;输入＆＃39;选择器ngb-tab上定义的属性。如果您只想制作hidden（并且仍然拥有DOM中的元素，请尝试使用display在该元素上设置ngStyle样式（有关详情，请参阅docs 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）可以一起出现在一个元素上，所以将ngFor外部包裹在ng-container这样的内部，

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

要使所有这些情况起作用，您还需要将hidden对象中每个元素的tabs属性设置为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; }

微米。

Answer 4

如果批准的答案对您不起作用，您只需将要隐藏的ngb-tab放在div标记中，并为该特定div设置*ngIf条件即可。

<div *ngIf="condtion">
  <ngb-tab title="Sample Tab">
    <ng-template ngbTabContent>
    </ng-template>
  </ngb-tab>
</div>

ngb-tab [hidden] =“tab.hidden”不起作用

4 个答案: