更新角度变量后，视图不会在移动应用程序上更新，尽管它适用于浏览器

Posted 2023-03-13

【中文标题】更新角度变量后，视图不会在移动应用程序上更新，尽管它适用于浏览器

【英文标题】：View does not get updated on Mobile app after angular variables are updated, though it works on browser

【发布时间】：2022-01-15 21:45:02

【问题描述】：

当组件内部的角度变量在一些 API 调用后更新时，它应该反映在移动视图的 UI 中（取决于 *ngIf 的值），但它没有。它适用于网络、桌面等。 如果我在移动页面上创建一个额外的按钮并单击它或重新加载页面，它也适用于移动设备。移动页面似乎需要初始交互，才能根据变量更改正确加载页面。它本身不做这项工作。

<div *ngIf="!hasToken">
      <button type="button" class="btn btn-primary" (click)="Login()"><img src="images/icon-ms.ico">Login</button>
</div>

AngularComponent.ts

ngOnInit() 
 this.exampleService.getData(id).subscribe((result) => 
  if (result != undefined || result != null) 
  this.hasToken= true;
 

一旦变量 hasToken 在 ngOnInit() 上变为 true，它应该隐藏 Login 按钮，但它不会，尽管变量的值已更新.

任何解决此问题的建议将不胜感激。

【问题讨论】：

手机是什么意思？它是一个什么样的应用程序？原生脚本？离子？还有什么？

【参考方案1】：

我相信您遇到的情况与变更检测有关。 我建议避免使用异步管道在控制器中手动订阅。这提高了性能，并且非常适合更改检测。

你可以这样做：

readonly hasToken$ = this.exampleService.getData(id).pipe(map(result => !!result));

<div *ngIf="(hasToken$ | async) === false">
    <button type="button" class="btn btn-primary" (click)="Login()"><img src="images/icon-ms.ico">Login</button>
</div>

【讨论】：

为了解决这个问题，我添加了一个错误的窗口点击事件来触发页面进行初始交互。

【参考方案2】：

我认为您初始化/更新变量的方式不正确。您可以添加您的 .ts 吗？ 您也可以检查ChangeDetectorRef.MarkForCheck() 和ngOnchanges()，但这对您的问题来说太过分了。

【讨论】：

嗨，我用 ts 脚本编辑了这个问题。我也尝试保留 this.ref.markForCheck();和 this.ref.detectChanges();它仍然不起作用。我尝试在 hasToken 变量之后调用它。

为了确定，您是否检查过“result != undefined || result != null”是否为真？你有没有尝试在 this.hasToken= true 之后 console.log 一些东西；顺便说一句，你的条件不好......如果结果 === undefined 所以结果！== null 所以结果是真的，反之亦然。你应该像这样测试它：if (result)