Tengo un diálogo con diferentes pestañas. Quiero usar las pestañas para usuarios también para grupos de usuarios. El cuadro de diálogo es bastante similar, por lo que quiero usarlo como genérico... Las pestañas se usan desde 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>Estoy enfrentando diferentes problemas:
La sintaxis anterior para if/else no funciona. es decir, el contenido de UserDetails se muestra independientemente de la pestaña seleccionada.
a) ¿Por qué se muestra el contenido de UserDetails en todas las pestañas?
b) Si cambio a if/then/else-Syntax UserDetails no se muestra en todas las pestañas, pero el encabezado de la pestaña permanece.
El orden de visualización es molesto, es decir, veo la pestaña de permisos en la primera posición, pero quiero tenerla en la última posición. ¿Hay alguna manera de lograrlo? Nota: Los UserDetails de usuario pueden dividirse en más de una pestaña, la pestaña Permission puede no ser la última pestaña que se agregará. Estoy buscando una solución sin demasiada duplicación de código.
*ngIf un contenedor div o un contenedor ng-container ? Honestamente, no tengo ni idea de si esto es un error en ngx-bootstrap o no... Pero también podría ser un uso incorrecto de la sintaxis...
Los siguientes trabajos:
<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>El truco principal consta de 2 partes:
isUserEditor debe inicializarse en -1 y, por lo tanto, las pestañas no se representan desde el principio!1/3. Porque su primer problema es porque está envolviendo <tab> dentro de <div> . No necesitas manejar la visibilidad así. Hay una entrada [active] para <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> Donde tabsActivity es un modelo para todos los estados de las pestañas. (select) alternará la actividad individual de las pestañas cambiando el estado booleano de las propiedades tabsActivity .
[active] .