Angular4 - ngIf sonst mit Tabs

Question

Ich habe einen Dialog mit verschiedenen Registerkarten. Ich möchte die Registerkarten für Benutzer sowie für Benutzergruppe verwenden. Der Dialog ist ganz ähnlich also ich es als Standardversion verwenden möchten .... Tabs sind aus ngx-bootstrap (1.6.6)

<tabset> 
    <div *ngIf="isUserEditor; else groupDetails"> 
     <tab heading="User details"> 
       Details...content 4 user 
     </tab> 
    </div> 
    <ng-template #groupDetails> 
     <tab heading="Group details"> 
       Group content 
     </tab> 
    </ng-template> 
    <tab heading="Permissions"> 
       Permission settings 
    </tab> 
</tabset> 

verwendete ich bin vor unterschiedlichen Problemen:

1. Die obige Syntax für das if/else funktioniert nicht. der Inhalt von wird unabhängig von der ausgewählten Registerkarte angezeigt.

   a) Warum wird der Inhalt von auf allen Registerkarten angezeigt?

   b) Wenn ich zu ändern, wenn/then/else-Syntax UserDetails nicht auf allen Registerkarten angezeigt wird, aber die Registerkarte-Überschrift bleibt.

2. Die Reihenfolge der Anzeige ist nervig - nämlich ich sehe die Erlaubnis Registerkarte an der ersten Position - aber ich möchte es auf der letzten Position haben. Gibt es einen Weg, dies zu erreichen? Hinweis: Die ist möglicherweise in mehr als eine Registerkarte aufgeteilt, die Registerkarte Permission ist möglicherweise nicht die letzte Registerkarte, die hinzugefügt wird. Ich suche nach einer Lösung ohne zu viel Codeverdoppelung.

3. Gibt es einen Unterschied, wenn ich für den *ngIf einen div Behälter oder einen ng-container Behälter verwende? Ehrlich

Ich habe keine Ahnung, ob dieser Fehler ist in ngx-bootstrap oder nicht ... Aber es könnte auch eine falsche Verwendung von Syntax ...

Answer 1

Die folgenden Werke:

<tabset *ngIf="isUserEditor>=0"> 
    <div *ngIf="isUserEditor; then userDetails else groupDetails"></div> 
    <ng-template #userDetails> 
     <tab heading="User details"> 
      Details...content 4 user 
     </tab> 
    </ng-template> 
    <ng-template #groupDetails> 
     <tab heading="Group details"> 
      Group content 
     </tab> 
    </ng-template> 
    <ng-container *ngIf="true"> 
     <tab heading="Permissions"> 
      Permission settings 
     </tab> 
    </ng-container> 
    </tabset> 

Der wichtigste Trick besteht aus 2 Teilen:

1. isUserEditor Bedürfnisse am Anfang initialisiert -1 und so die Laschen nicht gemacht werden!
2. Wenn ich die letzte Registerkarte auch in einen Container lege ==> Berechnung wenn angezeigt oder nicht erfolgt am Ende = = Reihenfolge bleibt korrekt!

Answer 2

1/3 sein. Für Ihr erstes Problem ist, weil Sie <tab> innerhalb <div> wickeln. Sie müssen die Sichtbarkeit nicht so handhaben. Es gibt einen [active] Eingang für <tab>:

<tabset> 
    <tab header="User details" [active]="tabsActivity.tab1" (select)="tabToggle('tab1')"> 
     Details...content 4 user 
    </tab> 

    <tab header="Group details" [active]="tabsActivity.tab2" (select)="tabToggle('tab2')"> 
     Group content 
    </tab> 

    <tab header="Permissions" [active]="tabsActivity.tab3" (select)="tabToggle('tab3')"> 
     Permission settings 
    </tab> 
</tabset> 

Wo tabsActivity ein Modell für alle Zustände von Tabs ist. (select) wird einzelne Aktivität der Registerkarten durch das Verfolgen des booleschen Status von tabsActivity Eigenschaften umschalten.

2. Das Problem mit der Bestellung wird gelöst, wenn Sie [active] verwenden.