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]時解決。