【问题标题】:Nativescript Tabview Auto UpdateNativescript Tabview 自动更新
【发布时间】:2018-12-14 02:28:40
【问题描述】:

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

【问题讨论】:

  • 为什么要定期更新所有选项卡,只更新活动选项卡或当用户更改选项卡时。​​span>
  • 我会试试你下面提到的解决方案。对您上述问题的回答是 - 我不希望用户等待 API 在 tabchange 上获取数据。 API 不托管在 CDN 级服务器上,同时最终用户几乎没有耐心等待数据。

标签: typescript nativescript nativescript-angular


【解决方案1】:

在 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); }

【讨论】:

  • 尝试此解决方案,但无法理解 tabview ts 文件中的 updateData 如何更新单独 ts 文件(在组件类中)中的组件的可观察数据?
  • 使用来自子组件的@Input。我的 TabView 也使用相同的策略。
  • 用示例更新了答案。
猜你喜欢
  • 2018-05-15
  • 1970-01-01
  • 2019-02-16
  • 2012-04-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-02
  • 1970-01-01
相关资源
最近更新 更多