Angular4 - ng其他选项卡

Question

我有一个对话框，具有不同的选项卡。我想为用户组使用选项卡。

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> 
   

   我面对不同的问题采用if/else的上述语法不起作用。即独立于所选标签显示UserDetails的内容。

   a）为什么UserDetails的内容显示在所有标签中？

   b）如果我更改为if/then/else-Syntax UserDetails未显示在所有选项卡中，但标签标题保留。

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

3. 如果我用*ngIf a div集装箱或ng-container有没有差异？

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

Answer 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. 如果我把最后一个标签放到一个容器中==>计算如果显示或不是在最后=>顺序完成仍然是正确的！

Answer 2

1/3。对于你的第一个问题是因为你在<div>内包装<tab>。你不需要处理这样的能见度。有一个[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)将通过chaning布尔状态tabsActivity属性来切换标签的单个活动。

1. 订单问题将在您使用[active]时解决。