Question

我有点卡在这里，我认为可以简单地解决。 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上。

Answer 1

Android会基于androidOffscreenTabLimit缓存选项卡，默认情况下为1，而您不能将其设置为0，这是一个限制。一个简单的解决方法可能是在数据准备就绪之前，TabView不会启动ngIf。

<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>

问：Android上的Nativescript Tabview的第一个标签为空

1 个答案: