Nativescript Tabview自动更新

时间:2018-12-14 02:28:40

标签: typescript nativescript nativescript-angular

在Angular中使用Nativescript 5.0

该应用程序正在使用tabview结构。 每个选项卡视图都使用组件来显示数据。

定期(例如每30秒一次)更新标签页的最佳方法是什么?

组件正在调用api以获取实时数据。最初在启动App时,我在相应组件的ngOnInit()上调用api,因此选项卡中填充了数据。

如何定期从何处调用这些API?

这是我的TabView html文件,如下所示:

<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 :(得分:0)

在Tabview中添加selectedIndexChanged事件并更新活动Tab的数据   <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; } }

interval:数字;

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