Nativescript angular2 无法访问 Segmentedbar selectedIndex答案

【问题标题】：Nativescript angular2 can't access Segmentedbar selectedIndexNativescript angular2 无法访问 Segmentedbar selectedIndex
【发布时间】：2016-07-28 00:19:48
【问题描述】：

亲爱的，我正在使用带有 angular2 的 nativescript 并尝试使用 SegmentedBar 它对我来说很好，但我需要触发我的 HTML 的 selectedIndex ：

<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 值而不是活动的值。我也试过那个代码sn-p： http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html 但它对我不起作用，因为：

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

如果有人可以帮助或给我一个工作的sn-p。谢谢。

【问题讨论】：

标签： angular telerik nativescript

【解决方案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)
    }
}

【讨论】：

不鼓励在 SO 上使用仅链接的答案。请直接在您的回答中发布相关内容。

【解决方案2】：

从元素实例中获取选择的索引如下

this.tabs.nativeElement.selectedIndex

【讨论】：