代码之家 › 专栏 › 技术社区 › Jose L. Garcia

Nativescript Angular SegmentedBar项动态标题

nativescript-angular nativescript

Jose L. Garcia · 技术社区 · 7 年前

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

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

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

当做约瑟

2 回复 | 直到 7 年前

Nick Iliev 7 年前

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

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

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

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

主页.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)

Jose L. Garcia 7 年前

我已经找到了一个解决方案与此代码为任何人与相同的问题:

首先,定义本机元素(别忘了将#SegmentedBar添加到xml中):

@ViewChild('SegmentedBar') SegmentedBar: ElementRef;

更改标题:

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

谢谢约瑟