В Ionic 4 наблюдаемый от выбора магазина не обновляет пользовательский интерфейс! Почему?

Question

Простая страница с данными и асинхронным каналом не перезагружается, когда наблюдаемое создает новое значение.

Я создал пустую страницу с помощью Ionic CLI. Я добавляю плагин сети. На домашней странице я слушаю изменения в сети, консоль записывает изменения, но пользовательский интерфейс не обновляется…

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>

Я запускаю приложение с ionic cordova run android -lcs (на моем устройстве, подключенном через USB)
Я меняю тип сети, отключив Wi-Fi. Журналы консоли:

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

Пользовательский интерфейс не обновляется ... Что не так ???

Answer 1

Пришлось протестировать его самому, чтобы подтвердить мое подозрение, что плагин работает вне обнаружения угловых изменений. Таким образом, даже присвоение значения строковой переменной, такой как ...

this.network.onConnect().pipe(
  map(() => this.network.type)
).subscribe(type => this.test$ = type)

и отображение с помощью {{ test$ }}, не работает

Поэтому мы можем вместо этого инициировать обнаружение изменений вручную, импортировав ChangeDetectorRef, вставьте его в конструктор и вызовите detectChanges():

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

// ...

constructor(
  private network: Network,
  private cdr: ChangeDetectorRef
) { }

ngOnInit(): void {
  this.test$ = concat(
    this.network.onConnect().pipe(debounceTime(2000)),
    this.network.onDisconnect()
  ).pipe(
    map(() => this.network.type),
    tap(() => this.cdr.detectChanges())
  );
}