javascript - 如何有条件地隐藏 native 脚本( Angular )中的选项卡项目？

Question

在 NativeScript Angular 应用程序中隐藏 tabViewItems 的推荐方法是什么。

我尝试将 ngIf 指令与 ng-template 结合使用，但似乎并不完全支持它。

这是我正在使用的代码

<TabView [selectedIndex]="auth.user ? 2 : 4" class="tab-view" sdkExampleTitle sdkToggleNavButton>
      <!--shown when logged in-->
      <ng-template [ngIf]="auth.user">
        <!--notifications tabs-->
        <StackLayout *tabItem="{title: 'notifications', iconSource: 'res://ic_action_home'}">
          <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
          <ScrollView>
            <Label text="content" textWrap="true" class="m-15"></Label>
          </ScrollView>
        </StackLayout>
        <!--messages tabs-->
        <StackLayout *tabItem="{title: 'Messages', iconSource: 'res://ic_action_home'}">
          <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
          <ScrollView>
            <Label text="content" textWrap="true" class="m-15"></Label>
          </ScrollView>
        </StackLayout>
      </ng-template>
      <StackLayout *tabItem="{title: 'People', iconSource: 'res://ic_action_home'}">
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
          <Label text="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
      </StackLayout>
      <StackLayout *tabItem="{title: 'Home', iconSource: 'res://ic_action_home'}">
        <RadListView [items]="announcementService.announcements" loadOnDemandMode="Auto" class="list-group">
          <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemInsertAnimation="Slide" itemDeleteAnimation="Default">
            <ng-template tkListItemTemplate let-item="item">
              <GridLayout class="list-group-item" rows="*" columns="auto, *">
                <Image row="0" col="0" decodeWidth="60" decodeHeight="60" loadMode="async" src="res://icon" class="thumb img-rounded"></Image>
                <StackLayout row="0" col="1">
                  <Label [text]="item.title" textWrap="true" class="list-group-item-heading"></Label>
                  <Label class="list-group-item-text" [text]="item.createdAt | amTimeAgo"></Label>
                </StackLayout>
              </GridLayout>
            </ng-template>
          </ListViewLinearLayout>
        </RadListView>
      </StackLayout>
    </TabView>

当将 ng-template 与 ngIf 一起使用时，它第一次可以工作，但重新加载应用程序后它就不再工作了。

我尝试了 [visibility] = "..condition.. ? 'visible': 'collapse'"，但没有成功。

我做错了什么？

Answer 1

像这样的东西可能会起作用:

<ng-container *ngIf="isLoggedIn()">
  <StackLayout>
    // ...
  </StackLayout>
</ng-container>