如何有条件地隐藏nativescript（角度）中的选项卡项？答案

【问题标题】：how to hide tabitems in nativescript (angular) conditionaly?如何有条件地隐藏nativescript（角度）中的选项卡项？
【发布时间】：2017-05-29 15:14:35
【问题描述】：

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

我尝试了结合 ng-template 的 ngIf 指令，但似乎不完全支持。

这是我正在使用的代码

<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'"，但没有成功。

我做错了什么？

【问题讨论】：

标签： javascript nativescript angular2-nativescript

【解决方案1】：

这样的事情可能会起作用：

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

【讨论】：