@ ionic-native/Netzwerk Wert Erfassung von beobachtbaren

Question

Ich verwende das @ ionic-native/Netzwerk mit dem cordova-plugin-network-information Plugin zur Überprüfung des Online-Offline-Status. Ich habe jedoch Schwierigkeiten, den Netzwerkstatus zu aktualisieren.

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> 

jedoch die Anwendung auf ausgeführt wird, zeigt es nur falsch, doch die console.log(this.online) zeigt Wahr-Falsch-Änderungen, wenn ich wechseln das WLAN. Irgendwelche Vorschläge, wie die Schnittstellenwerte auch zu Änderungen gemacht werden können.

Answer 1

Try und verwenden ChangeDetectorRef, wenn Änderungserkennung aus irgendeinem Grund nicht in Vorlage geschieht:

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

    }); 

    } 

}