Network plugin + Observable = UI not refreshed

@bdesprez wrote:

A simple page with data and async pipe is not reloaded when observable emits new value.

I created a blank page with Ionic CLI.
I add the Network plugin.
In the home page I listen network changes, the console logs the changes but UI is not refreshed …

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Network
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.page.ts

test$: Observable<string>;

  constructor(private network: Network) {}

    /**
     *
     */
  ngOnInit(): void {
      this.test$ = concat(
          this.network.onConnect().pipe(debounceTime(2000)),
          this.network.onDisconnect()
      ).pipe(
          tap(() => console.log('Connection changed !')),
          map(() => this.network.type),
          tap(type => console.log('Connection type', type))
      );
  }

home.page.html

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

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p *ngIf="test$|async as test">{{test}}</p>
  </div>
</ion-content>

I run the app with ionic cordova run android -lcs (on my device connected by USB)
I change the network type by disableing the wifi. The console logs :

Connection changed !
home.page.ts:26 Connection type 4g

The UI is not refreshed …
What’s wrong ???

Posts: 1

Participants: 1

Read full topic