angular - ngb-tab [隐藏] ="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 上定义的“输入”属性。如果您只是想让它隐藏(并且仍然在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 )不能同时出现在一个元素上，因此将 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。