Nativescript angular2無法訪問Segmentedbar的selectedIndex

逗人，我使用nativescript與angular2並嘗試使用SegmentedBar它正常工作與我，但我需要觸發的selectedIndex我的HTML：Nativescript angular2無法訪問Segmentedbar的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值不是活動的。我也試過了代碼片段： http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html 但它不適合我，因爲：

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

如果任何一個能幫助或者給我一個工作片段。謝謝。

來源

2016-07-28 Mohammed Agwa

如果你要處理的SegmentedBar的selectedIndex變化情況下，您應該添加ID #sg，這將使得在角視圖的實例，那麼你應該加入sg.selectedIndex而不是您的SegmentChanged方法中的selectedIndex作爲參數。例如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) 
    } 
}

來源

2016-07-28 07:42:18

鏈路只答案都望而卻步的SO。請直接在您的答案中發佈相關內容。 –

謝謝@尼古拉它工作正常。 –

-1

採取從元素實例所選擇的指標如下

this.tabs.nativeElement.selectedIndex

來源

2016-07-28 02:40:22 mahidhar

Nativescript angular2無法訪問Segmentedbar的selectedIndex

回答

相關問題