Angular 4 [hidden]="tab.hidden" nie chce działać

Question

Witam,

może wiecie dlaczego nie chce ukryć taba w poniższym kodzie Angular 4?

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

Comments

Sprawdź, czy w konsoli są jakieś błędy.

[hidden]="tab.hidden"

Wykonsoluj sobie co jest w polu tab.hidden - bo może nie ma tam wartości true.

---

Błędów nie ma, a i jak true się wpisze też nie chce zadziałać. Dzięki!

---

Zobacz w inspektorze elementów, czy CSSowe property display: none zostaje prawidłowo zaaplikowane - może jakiś styl ma wyższe specificity i po prostu [hidden] nie daje rady się "przebić" żeby ukryć element? 

Dlaczego nie użyjesz *ngIf?

---

Próbowałem, ale dając div-a z ngIf oplatającego szablony takie puste zakładki powstały. To są moje początki z NG4 i wiele jest dla mnie czymś nowym:

kod w NG4

przepisywany z NG1 projekt

dzięki za podpowiedź - będę walczył!

M.

---

Jeśli w oknie elementów DOM z palca dopiszę style="display: none" do <li> skubaniec znika z ekranu.

<li class="nav-item" style="display: none">
        <a class="nav-link" href="" role="tab" id="2" aria-expanded="false" aria-disabled="false">
          <!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->Grafiki
        </a>
      </li>

No nic - pokombinuję jeszcze! Dodałem do styles.css 

[hidden] {
  display: none !important;
}

ale nie chce to pomóc. Spróbuję dostosować kod tych tabulatorów.

M.

---

Uff...

rozwiązanie:

<ngb-tab *ngFor="let tab of tabs" [id]="tab.id" [disabled]="tab.disabled" [hidden]="tab.hidden">

oraz modyfikacja tabset.js poprzez dodanie właściwości '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,] },],
};

oraz modyfikację szablonu <li class=\"nav-item\" *ngFor=\"let tab of tabs\" [class.hidden]=\"tab.hidden\">\n:

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

styl:

.hidden {
  display: none !important;
}

M.