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中的元素，尝试使用display在该元素上设置ngStyle样式（有关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>

要使所有这些情况起作用，您还需要将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;
    }

M.

Answer 4

如果批准的答案对你不起作用，你可以把你的ngb-tab隐藏在div标签中，并把你的*ngIf条件用于特定的div工作正常。

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