Nativescript Angular Tabview Binding

Question

Ich verwende nativescript mit angular2 und tabview. Die tabview funktioniert soweit gut und ich kann auch den tabIndex erhalten und setzen, während ich zwischen den tabItems klicke oder wische.

Mein Problem ist jetzt, dass, wenn das Ereignis "onSelectedIndexChanged" ausgelöst wird, ich nicht in der Lage bin, einen Header-Titel mit Datenbindung zu setzen. Es wirft den Fehler "ExpressionChangedAfterItHasBeenCheckedError".

Hier ist die Komponente Inhalt:

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); 
    } 
} 

Der HTML-Code ist folgende:

<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>

Danke für Ihre Hilfe, dieses Problem zu lösen.

Answer 1

Das Problem ist, dass es scheint, die "OnSelectedIndexChanged" bereits vor dem "ngOnInit" und auch viele Male zu nennen. Also habe ich die Bindung falsch gemacht, aber es gibt einen einfachen Ausweg.

1. Ändern Sie den Methodenaufruf (SelectedIndexChanged) = "OnSelectedIndexChanged ($ event)", um die Argumente der Veranstaltung zu erhalten.

   <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> 
   

2. Ändern der Methode innerhalb der Komponente zu nur ausgeführt, wenn der Wert geändert hat.

   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; 
       } 
       } 
   }