对属性的更改未出现在真实设备上的模板中

Question

在我的 Ionic 5 应用程序中，当互联网连接不可用时，我将向用户显示带有一些文本的叠加层。

我有以下功能来检测互联网是否可用。

checkOnline$(): Observable<boolean> {
    return merge(
      of(navigator.onLine),
      fromEvent(window, 'offline').pipe(mapTo(false)),
      fromEvent(window, 'online').pipe(mapTo(true)),
      );
}

在我的构造函数中，我调用了上面的函数。

this.checkOnline$().subscribe(isOnline => {

  if (!isOnline) {
    console.log('>>>>>> offLine');
    this.online = false;
  } else {
    console.log('>>>>>> online');
    this.online = true;
  }
  console.log('>>>>>> ##### this.online = ', this.online)
      
});

模板中使用属性 online 根据互联网的可用性显示或隐藏覆盖。

<div id="offline-overlay" *ngIf="!online" class="center-vertically">
    <div id="offline-overlay-text" class="center-content">
      <span>ABCD EFGH IJKL</span>
    </div>
</div>

以上设置工作正常。我按预期获得所有控制台日志，并根据 wifi 的可用性正确显示或隐藏覆盖。但仅在浏览器上。

当我将应用程序推送到设备时，它不起作用。为了检查属性 online 是否分配了正确的值，我尝试在模板中打印它。

{{online}}

不，它没有得到正确的值。但在浏览器中，它确实得到了正确的值。

我调试了安装到设备上的应用程序以检查控制台日志。这些按预期记录。

这是为什么？

为什么浏览器和设备上的行为不同？

我该如何解决这个问题。

提前致谢。

编辑：

我添加了日志来检查属性 online 是否获得了正确的分配值。当在设备上运行时，它确实获得了正确的值。现在只是模板没有得到那个值。

Answer 1

JoshMorony 在本教程中介绍了如何创建“连接”服务：http://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/ 2.8k。（第三部分）

它检测它是在设备上还是通过浏览器运行，并使用检查 Internet 连接的最佳方法。

否则我建议直接检查 Ionic 对象，例如：https://ionicframework.com/docs/native/network 而不是 window 与浏览器相关的对象，而不是本机移动组件。

Answer 2

找到解决方案。

原来是订阅里面的代码突破了Angular区。

我按照以下步骤解决了这个问题。

this.checkOnline$().subscribe(isOnline => {
      console.log('************* isonline = ', isOnline);
      if (isOnline) {
        console.log('>>>>>> online');

        this.zone.run(() => {
          this.isOffline = false;
          this.globalDataService.setAppOnline();
        });

      } else {
        console.log('>>>>>> offline');

        this.zone.run(() => {

          this.isOffline = true;
          this.globalDataService.setAppOffline();

        });

      }
});

感谢这个回答：

对属性的更改未出现在真实设备上的模板中

Changes to the property not appearing in template on real device

typescript

angular

ionic4

angular9

对 属性 的更改未出现在真实设备上的模板中

Changes to the property not appearing in template on real device

typescript

angular

ionic4

angular9

对属性的更改未出现在真实设备上的模板中