ngSwitch in Ionic2 funktioniert nicht

Question

Ich versuche, Header zwischen verschiedenen Zuständen des Verbindungsstatus meiner App zu wechseln. Aber nachdem ich die gebundene Variable "serverConnectionStatus" (im folgenden Code) zum ersten Mal geändert habe, bekomme ich einen leeren Header statt eines anderen Headers.

Ich habe versucht, den ngSwitch in den Ionen-Header selbst und in die Ion-Navbar.

Aber kein Erfolg so weit ....

Ich verwende Nightly Build von Winkel 2 + ionischen 2.

Jede Ahnung, was falsch gemacht hat?

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

Hinzufügen meine volle Komponente Quellcode unter:

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>