@ ionic-native/network値のキャプチャを観測可能から

Question

オンラインオフライン状態をチェックするために、cordova-plugin-network-informationプラグインで@ ionic-native/networkを使用しています。しかし、私はネットワークのステータスを更新するのが難しいです。

home.ts

import { Network } from '@ionic-native/network'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
public online:boolean=false; 
    constructor(public navCtrl: NavController,private network: Network) { 
     this.network.onDisconnect().subscribe(() => { 
     this.online=false; 
     console.log(this.online);  }); 
     this.network.onConnect().subscribe(() => { 
      this.online=true; 
     console.log(this.online); 
     }); 
    } 

} 

home.html

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h1>{{online}}</h1> 
</ion-content> 

ただし、アプリケーションを実行するには、それだけで偽示し、まだ私は切り替えるたびconsole.log(this.online)は真偽変化を示していますwifi。インターフェイスの値を変更する方法についての提案もあります。

Answer 1

試してみて、ChangeDetectorRefを使用し、何らかの理由で変化検出は、テンプレートで何が起こっていない場合：repyため

import { ChangeDetectorRef } from '@angular/core'; 

constructor(private ref: ChangeDetectorRef) { } 

    this.network.onDisconnect().subscribe(() => { 
    this.online = false; 
    console.log(this.online); 
    this.ref.detectChanges(); // run  
    }); 
    this.network.onConnect().subscribe(() => { 
     this.online=true; 
     console.log(this.online); 
     this.ref.detectChanges(); // run 
    }); 
} 

Answer 2

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
public online:boolean=false; 
    constructor(public navCtrl: NavController,private network: Network) {} 

    ngOnInit(){ 
     this.network.onConnect().subscribe(() => { 
     this.online=true; 
     console.log(this.online); 

     this.network.onDisconnect().subscribe(() => { 
      this.online=false; 
      console.log(this.online); 
     }); 

    }); 

    } 

}