Nativescript angular2 无法访问 Segmentedbar selectedIndex

Question

亲爱的，我正在将 nativescript 与 angular2 一起使用并尝试使用 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

从元素实例中取出选定的索引如下

this.tabs.nativeElement.selectedIndex

Answer 2

如果您想处理 SegmentedBar 的 selectedIndex 更改事件，您应该添加 id #sg ，这将在 angular 中创建视图实例，那么您应该添加 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)
    }
}

Nativescript angular2 无法访问 Segmentedbar selectedIndex

Nativescript angular2 can't access Segmentedbar selectedIndex

telerik

nativescript

angular