Nativescript角度分段条形图项目动态标题

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

我的问题是我无法访问代码中的段标题。 我正在生成所有标题，如下所示：

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

this.pageItems=[]；
设segmentedBarItem=新segmentedBarItem（）；
segmentedBarItem.title='Notes（'+order.Notes.length+'）；

当notes.length发生更改时，如何更新分段栏项目标题

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

问候

---

Jose

我已经找到了一个解决方案，该代码适用于任何有相同问题的人：

首先，定义本机元素（别忘了将#SegmentedBar添加到xml中）：

更改标题：

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

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

谢谢

---

Jose

我已经找到了一个解决方案，该代码适用于任何有相同问题的人：

首先，定义本机元素（别忘了将#SegmentedBar添加到xml中）：

更改标题：

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

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

谢谢

---

Jose

不创建新的分段条项目，而是获取已创建条项目的引用并更改其标题。用TypeScript演示上述内容的游乐场应用程序

使用可观察视图模型创建条形项目和绑定的

notes

主视图模型.ts

从“ui/segmented bar”导入{SegmentedBar，SegmentedBarItem}；
从“tns核心模块/data/Observable”导入{Observable}；
导出类HomeViewModel扩展了Observable{
私有getSegmentedBarItems=（）=>{
设segmentedBarItem1=新SegmentedBarItem（）；
segmentedBarItem1.title=“注释（0）”；
设segmentedBarItem2=新SegmentedBarItem（）；
segmentedBarItem2.title=“注释（0）”；
返回[segmentedBarItem1，segmentedBarItem2]；
}
segmentedBarItems:Array=this.getSegmentedBarItems（）；
selectedBarIndex：编号；
第一计数器：数字；
第二个计数器：数字；
构造函数（）{
超级（）；
此参数为.selectedBarIndex=0；
this.firstCounter=0；
this.secondCounter=0；
}
changeBarTitleOne（）{
设segBarItemOne=this.segmentedBarItems[0]；
segBarItemOne.title='Notes（+++this.firstCounter）+'；
}
changeBarTitleTwo（）{
设segBarItemOne=this.segmentedBarItems[1]；
segBarItemOne.title='Notes（+++this.secondCounter）+'；
}
}

主页。ts

从“tns核心模块/data/observable”导入{EventData}；
从“tns核心模块/ui/layouts/stack layout”导入{StackLayout}；
从“./主视图模型”导入{HomeViewModel}；
导出函数pageLoaded（参数：EventData）{
让page=args.object；
page.bindingContext=新的HomeViewModel（）；
}

home page.xml

---

操场演示（NativeScript+Angular）

不创建新的分段条项目，而是获取对已创建条项目的引用并更改其标题。用TypeScript演示上述内容的游乐场应用程序

使用可观察视图模型创建条形项目和绑定的

notes

主视图模型.ts

从“ui/segmented bar”导入{SegmentedBar，SegmentedBarItem}；
从“tns核心模块/data/Observable”导入{Observable}；
导出类HomeViewModel扩展了Observable{
私有getSegmentedBarItems=（）=>{
设segmentedBarItem1=新SegmentedBarItem（）；
segmentedBarItem1.title=“注释（0）”；
设segmentedBarItem2=新SegmentedBarItem（）；
segmentedBarItem2.title=“注释（0）”；
返回[segmentedBarItem1，segmentedBarItem2]；
}
segmentedBarItems:Array=this.getSegmentedBarItems（）；
selectedBarIndex：编号；
第一计数器：数字；
第二个计数器：数字；
构造函数（）{
超级（）；
此参数为.selectedBarIndex=0；
this.firstCounter=0；
this.secondCounter=0；
}
changeBarTitleOne（）{
设segBarItemOne=this.segmentedBarItems[0]；
segBarItemOne.title='Notes（+++this.firstCounter）+'；
}
changeBarTitleTwo（）{
设segBarItemOne=this.segmentedBarItems[1]；
segBarItemOne.title='Notes（+++this.secondCounter）+'；
}
}

主页。ts

从“tns核心模块/data/observable”导入{EventData}；
从“tns核心模块/ui/layouts/stack layout”导入{StackLayout}；
从“./主视图模型”导入{HomeViewModel}；
导出函数pageLoaded（参数：EventData）{
让page=args.object；
page.bindingContext=新的HomeViewModel（）；
}

home page.xml

操场演示（NativeScript+Angular）

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) + ')';
    }
}

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

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