Nativescript angular2 kann nicht auf Segmentedbar selectedIndex

Question

Dears, Ich verwende nativescript mit angular2 und versuchen SegmentedBar zu verwenden funktioniert es bei mir gut, aber ich brauche die selectedIndex mein HTML auslösen:

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

und meine Komponente ist:

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 
} 

dieser Code gibt mir den alten SelectIndex-Wert nicht der aktive. ich bin auch, dass die Code-Schnipsel versucht: http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html aber es für mich nicht funktioniert, weil:

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

Wenn jemand kann mir einen Arbeits Schnipsel helfen oder geben. danke.

Answer 1

Im Fall folgt man selectedIndex Änderungsereignis von SegmentedBar zu handhaben möchten, sollten Sie id #sg, fügen Sie die Instanz der Ansicht in Winkel machen, dann sollten Sie hinzufügen sg.selectedIndex statt selectedIndex als Argument in Ihrer SegmentChanged Methode. Zum Beispiel SegmentChanged(sg.selectedIndex). Dadurch erhalten Sie den richtigen Index. Sie können auch das beigefügte Beispiel unten sehen.

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

Nehmen Sie den ausgewählten Index von Elementinstanz als

this.tabs.nativeElement.selectedIndex