私のアプリケーションの接続状態のさまざまな状態の間でヘッダーを切り替えようとしています。しかし、最初にバインド変数 "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>
:代わりに、あなただけの1(推奨されるような)を使用し、このようなあなたのtypescriptですコードに変更される可能性が物事を結合しない理由は異なる3
ion-header
を定義します。引用符を削除すると、ヘッダがまったく表示されなくなります。 – rubmzこの ' Eenie'を使用してください。私は 'template'タグで' ion-header'タグを囲むことを意味します –
はtemplate.htmlファイルで許されていません...とにかく動作しません – rubmz