Nativescript Angular SegmentedBar 项目动态标题

Question

我想构建一个带有动态标题的 SegmentedBar，例如："Notes (5)" 其中 5 是这些片段中显示的注释数。

我的问题是我无法在代码中访问片段标题。我生成的所有标题都是这样的：

this.pageItems = [];
let segmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
segmentedBarItem.title = 'Notes (' + order.notes.length + ')';

如何在 notes.length 更改时更新 segmentedbar 项目标题？

如果我再次创建所有 segmentedBarItems 段位置更改为第一个段，我不想更改位置，只更新段的标题。

问候何塞

Answer 1

我已经为遇到相同问题的任何人找到了使用此代码的解决方案：

首先，定义原生元素（不要忘记将#SegmentedBar 添加到xml）：

@ViewChild('SegmentedBar') SegmentedBar: ElementRef;

更改标题：

this.SegmentedBar.nativeElement.items[3].title = 'Notes (' + this.order.notes.length + ')';

这些代码只刷新项目标题，不改变位置等

谢谢何塞

Answer 2

不要创建新的分段栏项目，而是获取对已创建项目的引用并更改其标题。使用 TypeScript here.

演示上述内容的 Playground 应用

使用 Observable 视图模型创建条形项和绑定 notes

home-view-model.ts

import { SegmentedBar, SegmentedBarItem } from "ui/segmented-bar";
import { Observable } from 'tns-core-modules/data/observable';

export class HomeViewModel extends Observable {
    private getSegmentedBarItems = () => {
        let segmentedBarItem1 = new SegmentedBarItem();
        segmentedBarItem1.title = "Notes (0)";
        let segmentedBarItem2 = new SegmentedBarItem();
        segmentedBarItem2.title = "Notes (0)";
        return [segmentedBarItem1, segmentedBarItem2];
    }

    segmentedBarItems: Array<SegmentedBarItem> = this.getSegmentedBarItems();
    selectedBarIndex: number;
    firstCounter: number;
    secondCounter: number;

    constructor() {
        super();

        this.selectedBarIndex = 0;

        this.firstCounter = 0;
        this.secondCounter = 0;
    }

    changeBarTitleOne() { 
        let segBarItemOne = this.segmentedBarItems[0];
        segBarItemOne.title = 'Notes (' + (++this.firstCounter) + ')';
    }

    changeBarTitleTwo() {
        let segBarItemOne = this.segmentedBarItems[1];
        segBarItemOne.title = 'Notes (' + (++this.secondCounter) + ')';
    }
}

home-page.ts

import { EventData } from 'tns-core-modules/data/observable';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { HomeViewModel } from './home-view-model';

export function pageLoaded(args: EventData) {

    let page = <StackLayout>args.object;
    page.bindingContext = new HomeViewModel();
}

home-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="*, 2*, 2*">
        <SegmentedBar row="0" items="{{ segmentedBarItems }}" selectedIndex="{{ selectedBarIndex }}" />
        <Button row="1" text="Change first title" tap="{{ changeBarTitleOne }}" />
        <Button row="2" text="Change second title" tap="{{ changeBarTitleTwo }}" />
    </GridLayout>
</Page>

游乐场演示 here (NativeScript + Angular)

Nativescript Angular SegmentedBar 项目动态标题

Nativescript Angular SegmentedBar item dynamic title

nativescript

nativescript-angular