问：Android 上的 Nativescript Tabview 第一个选项卡是空的答案

【问题标题】：Q: Nativescript Tabview first tabs empty on Android问：Android 上的 Nativescript Tabview 第一个选项卡是空的
【发布时间】：2018-11-26 22:54:32
【问题描述】：

我有点卡在这里，我认为可以简单地解决。 Nativescript + Angular 的新手。

我从 Nativescript 文档中获取了 Tabview 代码并添加了一个 ng 容器，以显示我通过服务提供的一组数据（主要是对 json 的单个 http 请求）并在 ngOnInit() 中对其进行初始化。使用以下代码，我得到的数据在 TabTitle (*tabItem) 中正确显示，但问题就在下一行开始。

在 Android 上，我的前两个选项卡是空的。只有当滑动到第四个标签而不是向后滑动到第一个时，我的两个标签才会出现。（当再次滑动到第三个并向后滑动时，只会出现第一个。）在 iOS 上，这个问题不会发生。知道如何重新加载 Android 上的第一个选项卡，或者为什么会发生这种情况？任何帮助表示赞赏，谢谢！

这是我的 component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" [text]="timetableName"></Label>
</ActionBar>

<TabView id="tabViewContainer">
    <ng-container *ngFor="let tab of tabTitles; let i = index">
        <StackLayout *tabItem="{title: tab + ' Tab'}">
            <StackLayout>
                <Label [text]="tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
            </StackLayout>
        </StackLayout>
    </ng-container>
</TabView>

I've attached a short gif，显示缺失和出现的标签。

Here's the reproduced issue 在 Nativescript Playground 上。

【问题讨论】：

我无法在Playground 上重现该问题，您能否试一试并进行必要的更改，以便我们看到问题。
@Manoj 谢谢！我在你的操场上为你重现了这个问题。我将在 Mainpost 上附上示例以获得更好的概述。 link

标签： android angular nativescript

【解决方案1】：

Android 根据您的androidOffscreenTabLimit 缓存选项卡，默认为 1，您不能将其设置为 0，这是一个限制。一个简单的解决方法可能是在您的数据准备好之前使用ngIf 启动您的TabView。

<ActionBar class="action-bar">
    <Label class="action-bar-title" [text]="timetableName"></Label>
</ActionBar>

<TabView id="tabViewContainer" *ngIf="tabTitles.length">
    <ng-container *ngFor="let tab of tabTitles; let i = index">
        <StackLayout *tabItem="{title: tab + ' Tab'}">
            <Label [text]="tab" textWrap="true" class="m-15 h2 text-left"
                color="blue"></Label>
        </StackLayout>
    </ng-container>
</TabView>

【讨论】：

我试图用 ngIf 只检查“tabTitles”的整个时间，并没有再考虑它。干净而完美的答案，谢谢。