Question

逗人，我正在使用带有angular2的nativescript并尝试使用SegmentedBar它可以正常使用我但我需要触发selectedIndex我的HTML：

<SegmentedBar class="tabs" [items]="items" [(ngModel)]="selectedIndex" selectedBackgroundColor="#000" (selectedIndexChanged)="SegmentChanged(selectedIndex)"  #tabs></SegmentedBar>

我的组件是：

selectedIndex: number;
constructor( @Inject(Page) private _page: Page){
this.selectedIndex = 0;
}
public SegmentChanged(b) {
 console.log(b) // it gives me the old value not the current value
}

该代码为我提供了旧的selectIndex值而不是活动值。我也试过那段代码： http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html 但它对我不起作用，因为：

@ViewChild("tabs") tabs: ElementRef; // console.log(this.tabs); return undefined

如果任何人可以帮助或给我一个工作片段。谢谢。

Answer 1

如果你想处理SegmentedBar的selectedIndex更改事件，你应该添加id #sg，这将使视图的实例成为角度，那么你应该添加sg.selectedIndex而不是selectedIndex作为参数在您的SegmentChanged方法中。例如SegmentChanged(sg.selectedIndex)。这将允许您获得正确的索引。您还可以查看下面附带的示例。

app.component.html

<StackLayout>
    <SegmentedBar #tabs [items]="items" [selectedIndex]="index" (selectedIndexChanged)="SegmentChanged(tabs.selectedIndex)">
    </SegmentedBar>
</StackLayout>

app.component.ts

import {Component} from "@angular/core";
import {SegmentedBarItem} from "ui/segmented-bar";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public index: number;
    public items: Array<SegmentedBarItem>;
    constructor() {
        this.index=0;
        this.items=[];
        for(var i=0; i<4; i++){
            var segItem= new SegmentedBarItem();
            segItem.title="Title"+i;
            this.items.push(segItem);
        }



    }

    public SegmentChanged(value){
        console.log("selected index "+value)
    }
}

Answer 2

从元素实例中获取所选索引，如下所示

this.tabs.nativeElement.selectedIndex

Nativescript angular2无法访问Segmentedbar selectedIndex

2 个答案: