2016-08-18 13 views
1

私のアプリケーションの接続状態のさまざまな状態の間でヘッダーを切り替えようとしています。しかし、最初にバインド変数 "serverConnectionStatus"(以下のコード)を変更した後、別のヘッダーではなく空のヘッダーが表示されます。ngSwitch in Ionic2 not working

イオン・ヘッダー自体とイオン・ナビゲーションバーにngSwitchを入れてみました。

しかし、これまでのところありません成功....

私は2イオン+ 2の角度

のナイトリービルドに悪いことを何任意の手掛かりを使用していますか?以下の私の完全なコンポーネントのソースコードの追加

<div [ngSwitch]="serverConnectionStatus"> 
    <ion-header *ngSwitchCase="'connecting'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #00b900 !important;">Connecting Server...</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
    <ion-header *ngSwitchCase="'error'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #ff1608 !important;">No Posts: {{serverConnectionError}}</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
    <ion-header *ngSwitchCase="'connecting'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #00b900 !important;">Connecting Server...</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
</div> 

Home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Config } from '../../providers/config/config'; 
import { PostService } from '../../providers/http/post-service' 
import { ToastController } from 'ionic-angular'; 
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; 

@Component({ 
    templateUrl: 'build/pages/home/home.html', 
    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault] 
    }) 

export class HomePage 
{ 
    private posts: any; 
    public serverConnectionStatus: string = "connecting"; 
    public serverConnectionError: string = ""; 

    constructor(private navCtrl: NavController, private toastController : ToastController, private config: Config, private PostService: PostService) 
    { 
     this.getLocalPosts(); 
    } 

    private addRandomPosts() 
    { 

    } 

    private getLocalPosts() 
    { 
     this.PostService.getPosts() 
      .subscribe(
       postsJson => 
       { 
        this.posts = postsJson; 
        this.serverConnectionStatus="connected"; 
       }, 
       error => 
       { 
        console.error(error); 
        //this.serverConnectionError="1234"; // error.statusText; 
        //this.serverConnectionStatus="error"; 
       }); 
    } 
} 

Home.html

<div [ngSwitch]="serverConnectionStatus"> 
    <ion-header *ngSwitchCase="'connecting'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #00b900 !important;">Connecting Server...</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
    <ion-header *ngSwitchCase="'error'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #ff1608 !important;">No Posts: {{serverConnectionError}}</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
    <ion-header *ngSwitchCase="'connected'"> 
     <ion-navbar> 
      <ion-title> 
       <span style="color: #00b900 !important;">Connected</span> 
      </ion-title> 
     </ion-navbar> 
    </ion-header> 
</div> 

<ion-content class="home"> 
    <ion-list> 
    <ion-item *ngFor="let post of posts"> 
     <ion-avatar item-left> 
     <img src="{{post.picture.thumbnail}}"> 
     </ion-avatar> 
     <h2>{{post.name.first}} {{post.name.last}}</h2> 
     <p>{{post.email}}</p> 
    </ion-item> 
    </ion-list> 
</ion-content> 
+0

:代わりに、あなただけの1(推奨されるような)を使用し、このようなあなたのtypescriptですコードに変更される可能性が物事を結合しない理由は異なる3 ion-headerを定義します。引用符を削除すると、ヘッダがまったく表示されなくなります。 – rubmz

+2

この ''を使用してください。私は 'template'タグで' ion-header'タグを囲むことを意味します –

+0