0

更改 SegmentedBar 组件的索引时，我在更新 UI 时遇到问题。

我开始尝试将分段栏与 angular/nativescript 路由器导航一起使用。我可以让 SegmentedBar 更新栏的索引，然后触发导航更改，但视图没有使用来自组件的动态数据更新任何 UI。

所以我稍微简化了一点，让所有的 UI 都呈现在 app.component 中，包括 SegmentedBar。但同样的问题，我正在检查 SegmentedBar 上的更改，然后更新变量，但它不反映 UI 中的更改。

这是组件的错误还是我做错了什么？

    import {Component, AfterViewInit, OnInit, ViewChild, ElementRef} from "@angular/core";
    import {TabsComponent} from "./components/tabs/tabs.component";
    import {HTTP_PROVIDERS, Http} from '@angular/http';
    import {ROUTER_DIRECTIVES, Router} from '@angular/router';
    import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';

    import {SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData} from 'ui/segmented-bar';


    @Component({
        selector: 'my-app',
        //directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES, TabsComponent],
        //providers: [HTTP_PROVIDERS, TodoService],
        template: `
    <ActionBar title="Calculator" class="ui-action-bar">
         <ActionItem tap="onShare"
          ios.systemIcon="9" ios.position="right"
          android.systemIcon="ic_menu_share" android.position="actionBar"></ActionItem>
    </ActionBar>
    <StackLayout>
                <StackLayout class="ui-nav">
                    <SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex"></SegmentedBar>
                </StackLayout>


      <StackLayout class="o-section o-section--edge-padding" orientation="vertical" visibility="{{ selectedIndex == 1 ? 'visible' : 'collapse' }}">

        <Label text="Home" class="ui-dia-section__title"></Label>

        <Label [text]="selectedIndex" class="ui-dia-section__title"></Label>
        <Label text="{{selectedIndex}}" class="ui-dia-section__title"></Label>
      </StackLayout>

      <StackLayout class="o-section o-section--edge-padding" orientation="vertical" visibility="{{ selectedIndex == 0 ? 'visible' : 'collapse' }}">
        <Label text="Glossary" class="ui-dia-section__title"></Label>
        <Label [text]="selectedIndex" class="ui-dia-section__title"></Label>

      </StackLayout>
    </StackLayout>
        `})
export class AppComponent {
    selectedIndex: number;
    items: Array<any>;
    showHomeScreen: boolean = true;
    showGlossaryScreen: boolean = false;

      @ViewChild("tabs") tabs: ElementRef;
    constructor() {

        this.selectedIndex = 0;
        this.items = [{ title: 'Calculator' }, { title: 'Glossary' }];
    }

    ngAfterViewInit() {
        this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
            switch (args.newIndex) {
                case 0:
                    console.log('first selected, selectedIndex: ' + this.selectedIndex);
                    //this.router.navigateByUrl("home");
                    this.selectedIndex = 0;
                    break;
                case 1:
                    console.log('second selected, selectedIndex: ' + this.selectedIndex);
                   // this.router.navigateByUrl("glossary");
                    this.selectedIndex = 1;

                    break;
                case 3:
                    console.log('third selected')
                    break;
            }
        })
    }
    ngOnInit(){
        console.log('ngOnInit, index: ' + this.selectedIndex);

    }
}
4

1 回答 1

0

很难阅读代码，但它似乎是一种双向绑定 - 盒子中的香蕉 - 问题？

尝试：[(ngModel)]="selectedIndex" 而不是：text="{{selectedIndex}}"

于 2016-07-18T16:47:22.920 回答