时间戳

首页 > 解决方案 > Nativescript Tabview 自动更新

typescript - Nativescript Tabview 自动更新

问题描述

在 Angular 中使用 Nativescript 5.0

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

定期更新标签的最佳方法是什么（比如每 30 秒）？

组件调用 api 来获取实时数据。最初，当应用程序启动时，我在各个组件的 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>

标签： typescriptnativescriptnativescript-angular

解决方案

在 Tabview 中添加 selectedIndexChanged 事件并更新活动 Tab 的数据 <TabView id="tabViewContainer" (selectedIndexChanged)="onSelectedIndexChanged($event)"> <StackLayout *tabItem="{title: 'Batches'}"> <StackLayout> <ns-batches (dataYouwanttoUpdate)="updatedInTabViewTs"></ns-batches>

在你的第一个TabItem.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(){
this.interval = setInterval(() => { this.getdata.getData().subscribe( data => { this.batches = data.batches ; }); },500); }

推荐阅读