Question

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

我开始尝试使用带有angular / nativescript路由器导航的Segmented条。我可以让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);

    }
}

Answer 1

难以阅读代码，但它似乎是盒子问题中的双向绑定-banana？

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

SegmentationBar更改更新模型但不更新UI

1 个答案: