Nativescript Angular SegmentedBar элемент динамического заголовка - PullRequest
Новая
       6

Nativescript Angular SegmentedBar элемент динамического заголовка

0 голосов
/ 10 октября 2018

Я бы хотел создать SegmentedBar с динамическим заголовком, например: «Примечания (5)», где 5 - это количество примечаний, показанных в этом сегменте.

Моя проблема в том, что я невозможность доступа к заголовку сегмента в коде.Я создаю все заголовки примерно так: 

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

Как можно обновить заголовок элемента сегментированной панели при изменении notes.length?

Если я создаю заново все сегментированныеBarItems, положение сегмента изменяется на первый сегменти я не хочу менять позицию, обновляю только заголовок сегмента.

С уважением, Хосе

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

НЕ создавайте новый элемент сегментированной панели, но получите ссылку на уже созданные и измените их заголовок.Приложение для игровой площадки, демонстрирующее вышеупомянутое с TypeScript здесь .

Использование модели вида 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>

Демонстрация игровой площадки здесь (NativeScript + Angular)

0 голосов
/ 10 октября 2018

Я нашел решение с помощью этого кода для любых людей с такой же проблемой:

Сначала определите собственный элемент (не забудьте добавить #SegmentedBar в xml): 

@ViewChild('SegmentedBar') SegmentedBar: ElementRef;

Изменить заголовок: 

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

Этот код только обновляет заголовок элемента, но не меняет позицию и т. Д.

Спасибо Хосе

...