Автообновление Nativescript Tabview - PullRequest
0 голосов
/ 14 декабря 2018

Использование Nativescript 5.0 с Angular

Приложение использует структуру табуляции.В каждом представлении вкладок для отображения данных используется компонент.

Каков наилучший метод периодического обновления вкладок (скажем, каждые 30 секунд)?

Компоненты вызывают API для получения данных в реальном времени.Изначально, когда приложение запускается, я вызываю api для ngOnInit () соответствующего компонента, и поэтому вкладки заполняются данными.

Как периодически вызывать эти API и откуда?

Здесьмой HTML-файл TabView выглядит так:

<TabView id="tabViewContainer">
    <StackLayout *tabItem="{title: 'Batches'}">
        <StackLayout>
            <ns-batches></ns-batches>
        </StackLayout>
    </StackLayout>    
    <StackLayout *tabItem="{title: 'Courses'}">
        <StackLayout>
            <ns-courselist></ns-courselist>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Post'}">
        <StackLayout>
            <ns-postlist></ns-postlist>
        </StackLayout>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Sales'}">
        <StackLayout>
            <ns-sales></ns-sales>
        </StackLayout>
    </StackLayout>
</TabView>

1 Ответ

0 голосов
/ 14 декабря 2018

Добавьте событие selectedIndexChanged в Tabview и обновите данные для активной вкладки <TabView id="tabViewContainer" (selectedIndexChanged)="onSelectedIndexChanged($event)"> <StackLayout *tabItem="{title: 'Batches'}"> <StackLayout> <ns-batches (dataYouwanttoUpdate)="updatedInTabViewTs"></ns-batches>

и в ваших firsTabItem.ts import { Input } from '@angular/core'; @Input() dataYouwanttoUpdate:ObservableArray

и в .ts

onSelectedIndexChanged(args: SelectedIndexChangedEventData) { const tabView = <TabView>args.object; const selectedTabViewItem = tabView.items[args.newIndex]; switch (args.newIndex) { case 0: //update the ns-batches data. this.updateData() ... default: break; } }

интервал: число;

updateData(){<br> this.interval = setInterval(() => { this.getdata.getData().subscribe( data => { this.batches = data.batches ; }); },500); }

...