Ionic4设置页变量iOS/Android端不生效 仅浏览器运行正常

这个问题的核心是原生端（iOS/Android）的Google Maps插件事件回调运行在Angular的变更检测上下文（NgZone）之外，你给viewing_place赋值的操作没有触发Angular的视图更新，所以虽然变量实际已经被赋值成功，但页面不会重新渲染，*ngIf的判断逻辑不会重新执行。
浏览器端运行正常是因为Web版Google Maps的事件是在Angular的Zone范围内触发的，赋值操作会自动触发变更检测；手动调用测试方法的时候，方法本身是在Angular上下文里执行的，所以也能正常触发视图更新。

两种常用修复方式二选一即可：

方案1：使用NgZone把回调逻辑包回Angular上下文 #

1. 先在组件中引入并注入NgZone：

import { Component, NgZone } from '@angular/core';
// 其他原有导入保持不变

@Component({
  // 组件元数据保持原有配置
})
export class YourMapPage {
  viewing_place: any;
  // 其他原有页面变量保持不变

  constructor(
    private ngZone: NgZone
    // 其他原有依赖注入保持不变
  ) {}

2. 修改openPlaceInfo方法，把赋值逻辑放到ngZone.run()的回调中执行：

openPlaceInfo(place){
  console.log(place);
  this.ngZone.run(() => {
    this.viewing_place = place;
  });
}

方案2：手动触发变更检测 #

1. 引入并注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';
// 其他原有导入保持不变

@Component({
  // 组件元数据保持原有配置
})
export class YourMapPage {
  viewing_place: any;
  // 其他原有页面变量保持不变

  constructor(
    private cdr: ChangeDetectorRef
    // 其他原有依赖注入保持不变
  ) {}

2. 修改openPlaceInfo方法，赋值后手动调用变更检测：

openPlaceInfo(place){
  console.log(place);
  this.viewing_place = place;
  this.cdr.detectChanges();
}

你模板里写的*ngIf="this.viewing_place"属于不规范写法，Angular模板中访问组件属性不需要加this.前缀，建议修改为*ngIf="viewing_place"，虽然这个写法不会直接导致本次的问题，但不符合Angular模板语法规范。

内容的提问来源于stack exchange，提问作者anderlaini