Ionic2中的ngSwitch不起作用

Question

我正在尝试在我的应用连接状态的不同状态之间切换标头。但是在第一次更改绑定变量“serverConnectionStatus”（在下面的代码中）后，我得到一个空标题而不是不同的标题。

我尝试将 ngSwitch 放在 ion-header 本身和 ion-navbar 中。

但到目前为止没有成功....

我正在使用 angular 2 + ionic 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>

Answer 1

请查看this plunker。与其定义三个不同的ion-header，不如只使用一个（推荐like）并像这样绑定打字稿代码中可能发生变化的东西：

    <ion-header>
        <ion-navbar>
            <ion-title>
                <span [style.color]="color">{{ title}}</span>
            </ion-title>
        </ion-navbar>
    </ion-header>

然后

    private getLocalPosts()
    {
        this.PostService.getPosts()
            .subscribe(
                postsJson =>
                {
                    this.posts = postsJson;
                    this.serverConnectionStatus="connected";

                    // Added code
                    this.color = ...;
                    this.title = ...;
                },
                error =>
                {
                    console.error( error );
                    //this.serverConnectionError="1234"; // error.statusText;
                    //this.serverConnectionStatus="error";

                    // Added code
                    this.color = ...;
                    this.title = ...;
                } );
    }