View does not get updated on Mobile app after angular variables are updated, though it works on brow-CodePudding

When the angular variables are updated inside the component after some API calls, it should be reflected in the UI of the mobile view (depending on the value of *ngIf), but it does not. It works on the web, desktop, etc. And if I create an extra button on the mobile page and click it OR reload the page, it works in mobile too. It seems like the mobile page requires initial interaction, to load the page correctly according to the variable change. It does not do the work itself.

<div *ngIf="!hasToken">
      <button type="button"  (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;
 }
}

Once the variable hasToken becomes true on ngOnInit(), it should hide the Login button, but it does not, though the value of the variable gets updated.

Any suggestion to solve this would be appreciated.

CodePudding user response：

I think the way you init/update your variable is incorrect. Can you add your .ts? You can also check ChangeDetectorRef.MarkForCheck() and ngOnchanges() but it's way too overkill for your problem.

CodePudding user response：

I believe that what you're experiencing is related to change detection. I suggest avoiding manually subscribing in the controller by using the async pipe. This improves the performance and works great with change detection.

You can do something like this:

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

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