1

我有一个带有不同选项卡的对话框。我想将标签用于用户以及用户组。该对话框非常相似，因此我想将其用作通用对话框......从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>

我面临着不同的问题：

  1. if/else 的上述语法不起作用。即UserDetails显示的内容独立于所选选项卡。

    a) 为什么UserDetails所有选项卡中都显示 的内容？

    b) 如果我更改为 if/then/else-SyntaxUserDetails不会显示在所有选项卡中，但选项卡标题仍然存在。

  2. 显示顺序很烦人 - 即我在第一个位置看到权限选项卡 - 但我想把它放在最后一个位置。有没有办法实现它？注意：可能UserDetails会拆分为多个选项卡，该Permission选项卡可能不是将添加的最后一个选项卡。我正在寻找一个没有太多代码重复的解决方案。

  3. 如果我用于*ngIfadiv容器或 a是否有差异ng-container？

老实说，我不知道这是否是错误ngx-bootstrap......但这也可能是语法的错误使用......

4

2 回答 2

1

以下作品：

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

主要技巧包括两部分：

  1. isUserEditor需要初始化-1，因此选项卡不会在一开始就呈现！
  2. 如果我将最后一个选项卡也放入容器 ==> 计算是否显示在最后完成 => 顺序仍然正确！
于 2017-04-27T11:56:33.327 回答
0

1/3。因为你的第一个问题是因为你正在包装<tab>里面<div>。你不需要像那样处理可见性。有一个[active]输入<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>

其中 tabsActivity 是所有选项卡状态的模型。 将通过更改属性(select)的布尔状态来切换选项卡的各个活动。tabsActivity

  1. 订单问题将在您使用时得到解决[active]。
于 2017-04-27T08:34:19.123 回答