Question

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

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

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

notes.length更改时如何更新分段的栏项目标题？

如果我再次创建所有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应用。

使用“可观察”视图模型创建条形项目和绑定的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项目动态标题

2 个答案: