Ionic2中的ngSwitch無法正常工作

Question

我正嘗試在應用程序連接狀態的不同狀態之間切換標頭。但在第一次更改綁定變量「serverConnectionStatus」（在下面的代碼中）後，我得到一個空頭，而不是一個不同的頭。

我曾嘗試將ngSwitch放入離子頭本身以及ion-navbar中。

但至今沒有成功....

我使用的每日構建角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>