Angular4 - 帶標簽的ngIf其他

Question

我有一個包含不同標簽的對話框。 我想為用戶以及用戶組使用選項卡。 該對話框非常相似，因此我想將其用作通用對象....選項卡用於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-Syntax UserDetails未顯示在所有選項卡中，但選項卡標題仍然存在。

2. 顯示順序很煩人 - 即我在第一個位置看到權限選項卡 - 但我希望將它放在最后一個位置。 有沒有辦法實現它？ 注意： UserDetails可能會拆分為多個選項卡，“ Permission選項卡可能不是將要添加的最后一個選項卡。 我正在尋找一種沒有太多代碼重復的解決方案。

3. 如果我用於*ngIf div容器或ng-container是否有差異？

老實說，我不知道這是否是ngx-bootstrap錯誤...但它可能是錯誤的語法使用...

Answer 1

1/3。 對於您的第一個問題是因為您在<div>中包裝<tab> <div> 。 你不需要像這樣處理可見性。 <tab>有[active]輸入：

<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屬性的布爾狀態來切換選項卡的各個活動。

2. 使用[active]時，將解決訂單問題。

Answer 2

以下作品：

  <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. 如果我將最后一個標簽也放入一個容器==>計算如果顯示或不在最后完成=>訂單仍然正確！