Nativescript Angular Tabview綁定

我正在使用native2和angular2和tabview。到目前爲止，tabview運行良好，我還可以在tabItems之間單擊或滑動時獲取和設置tabIndex。Nativescript Angular Tabview綁定

我現在的問題是，如果事件「onSelectedIndexChanged」被觸發，我不能用數據綁定設置標題標題。它會拋出錯誤「ExpressionChangedAfterItHasBeenCheckedError」。

這裏是成分含量：

import { Component, OnInit, EventEmitter, Output } from "@angular/core"; 
import { ConfigService } from "../../services/config.service"; 
import { CustomerService } from "../../services/customer.service"; 
import { UserService } from "../../services/user.service"; 

@Component({ 
    selector: "app-header", 
    templateUrl: "./components/shared/header.component.html", 
    styleUrls: ["./components/shared/header.component.css"] 
}) 

export class HeaderComponent implements OnInit { 
    @Output() openMenuEmmiter = new EventEmitter<boolean>(); 
    customer_image: string; 
    isAuthenticated: boolean = false; 
    tabSelectedIndex: number; 
    menuPointTitle: string; 

    constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) { 

    } 

    ngOnInit() { 
     this.tabSelectedIndex = 0; 
     this.menuPointTitle = "Home"; 

     this._userService.getIsAuthenticated().subscribe(
      (state) => {this.isAuthenticated = state;} 
     ); 

     this._customerService.getCurrentCustomer().subscribe(
      (customer) => {this.customer_image = customer.image;} 
     ); 

    } 

    onOpenMenu() { 
     this.openMenuEmmiter.emit(true); 
    } 

    onSelectedIndexChanged() { 
     this.menuPointTitle = this.tabSelectedIndex+"test"; 
     console.log(this.tabSelectedIndex); 
    } 
}

的HTML代碼如下：

<StackLayout class="accent"> 
 
    <FlexboxLayout flexDirection="column"> 
 
     <FlexboxLayout> 
 

 
      <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label> 
 
      <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label> 
 
      <Label [nsRouterLink]="['/login']" width="30" class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label> 
 
     </FlexboxLayout> 
 
    </FlexboxLayout> 
 
</StackLayout> 
 

 

 
<TabView [(ngModel)]="tabSelectedIndex" [selectedIndexChanged]="onSelectedIndexChanged()" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;"> 
 
    <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20"> 
 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-home' | fonticon"></Label> 
 
    </StackLayout> 
 
    <StackLayout *tabItem="{title: '&#xf1ea;'}"> 
 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-message' | fonticon"></Label> 
 
    </StackLayout> 
 
    <StackLayout *tabItem="{title: '&#xf07b;'}"> 
 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-folder' | fonticon"></Label> 
 
    </StackLayout> 
 
    <StackLayout *tabItem="{title: '&#xf005;'}"> 
 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-star' | fonticon"></Label> 
 
    </StackLayout> 
 
    <StackLayout *tabItem="{title: '&#xf059;'}"> 
 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-star' | fonticon"></Label> 
 
    </StackLayout> 
 
</TabView>

感謝您的幫助來解決這個問題。

來源

2017-04-12 Cateye

問題是，它似乎在「ngOnInit」之前已經調用了「onSelectedIndexChanged」，並且也是很多次。所以我做了綁定錯誤，但有一個簡單的出路。

更改方法調用（的SelectedIndexChanged）= 「onSelectedIndexChanged（$事件）」，以獲取事件的參數。

<StackLayout class="accent"> 
    <FlexboxLayout flexDirection="column"> 
    <FlexboxLayout> 
     <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label> 
     <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label> 
     <Label [nsRouterLink]="['/login']" width="30" class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label> 
    </FlexboxLayout> 
    </FlexboxLayout> 
</StackLayout> 


<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;"> 
    <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20"> 
    <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-home' | fonticon"></Label> 
    </StackLayout> 
    <StackLayout *tabItem="{title: '&#xf1ea;'}"> 
    <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-message' | fonticon"></Label> 
    </StackLayout> 
    <StackLayout *tabItem="{title: '&#xf07b;'}"> 
    <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-folder' | fonticon"></Label> 
    </StackLayout> 
    <StackLayout *tabItem="{title: '&#xf005;'}"> 
    <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-star' | fonticon"></Label> 
    </StackLayout> 
    <StackLayout *tabItem="{title: '&#xf059;'}"> 
    <Label [nsRouterLink]="['/start']" width="30" class="mdi" [text]="'mdi-star' | fonticon"></Label> 
    </StackLayout> 
</TabView>

將組件內部的方法更改爲只有在該值已更改時才運行。

import { Component, OnInit, EventEmitter, Output } from "@angular/core"; 
import { ConfigService } from "../../services/config.service"; 
import { CustomerService } from "../../services/customer.service"; 
import { UserService } from "../../services/user.service"; 

@Component({ 
    selector: "app-header", 
    templateUrl: "./components/shared/header.component.html", 
    styleUrls: ["./components/shared/header.component.css"] 
}) 

export class HeaderComponent implements OnInit { 
    @Output() openMenuEmmiter = new EventEmitter<boolean>(); 
    customer_image: string; 
    isAuthenticated: boolean = false; 
    tabSelectedIndex: number; 
    menuPointTitle: string; 

    constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) { 

    } 

    ngOnInit() { 
    this.tabSelectedIndex = 0; 
    this.menuPointTitle = "Home"; 

    this._userService.getIsAuthenticated().subscribe(
     (state) => {this.isAuthenticated = state;} 
    ); 

    this._customerService.getCurrentCustomer().subscribe(
     (customer) => {this.customer_image = customer.image;} 
    ); 

    } 

    onOpenMenu() { 
    this.openMenuEmmiter.emit(true); 
    } 

    onSelectedIndexChanged(args) { 
    if (args.newIndex != args.oldIndex) { 
     console.log(args.newIndex); 
     this.menuPointTitle = "test"+args.newIndex; 
    } 
    } 
}

來源

2017-04-26 14:07:15 Cateye

Nativescript Angular Tabview綁定

回答

相關問題