Q: Nativescript Tabview первые вкладки пустые на Android

Question

Я как бы застрял здесь в какой-то момент, который, я думал, мог бы быть просто решен.Довольно плохо знаком с Nativescript + Angular.

Я взял код Tabview из документов Nativescript и добавил контейнер ng, чтобы показать набор данных, которые я предоставляю через службу (в основном, один http-запрос к json), и инициализировать его в 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>

Я приложил короткий gif , который показывает отсутствующий и появляющийся ярлык.

Вот воспроизведенный выпуск на 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>