Question

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

我已尝试将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>

Answer 1

请查看this plunker。不要定义三个不同的ion-header，为什么不要只使用一个（就像推荐的那样）并绑定你的打字稿代码中可能发生变化的事情，如下所示：

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

Ionic2中的ngSwitch无法正常工作

1 个答案: