ngb-tab [hidden]="tab.hidden" 无效

Question

为什么不起作用[隐藏] = "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

在组件中设置 tab.hidden = true or false [hidden]="true" or [hidden]="false"

Answer 2

我的解决方案修改 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 : '弹性列')\" 角色=\"tablist\">\n<br> <li class=\"nav-item\" *ngFor=\"let tab of tabs\" [class.hidden]=\"tab.hidden\">\n

并添加到 styles.css

.hidden { display: none !important; }

男.

Answer 3

根据 docs, hidden is not an 'input' property defined on the selector ngb-tab. If you simply want to make it hidden (and still have the element in DOM, try setting the display style on that element using ngStyle (see 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 在这种情况下）可以一起出现在一个元素上，所以将 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>

为了使所有这些情况都起作用，您还需要将 tabs 对象中每个元素的 hidden 属性设置为 true 中的一个对应的布尔值或 false.

Answer 4

如果批准的答案不适合您，您可以将要隐藏的 ngb-tab 放在 div 标签中，然后将您的 *ngIf 条件用于特定的 div，效果很好。

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

ngb-tab [hidden]="tab.hidden" 无效

ngb-tab [hidden]="tab.hidden" not work

hidden

ng-bootstrap

angular