Ionic开发过程中遇到一个奇怪的问题,当通过Android原生Java以广播方式将数据传递到.ts页面时,数据可以console.log()出来,但UI并没有更新。
我的Android代码:
Intent intent = new Intent("TAG");
bundle.putString("userdata", "{ name: '" + "小明" + "', age: '" + "18" + "'}");
intent.putExtras(bundle);
LocalBroadcastManager.getInstance(context).sendBroadcastSync(intent);
在home.ts页面中,我订阅了触发事件,我的初始代码是:
ionViewWillEnter() {
this.broadcaster.addEventListener('TAG').subscribe((event) => {
this.items.push({
name: event['name'],
age: event['age'],
});
});
}
我期望在这里发生的是我的items数组(使用* ngFor以标准方式在我的模板中表示)将使用来自广播对象的值进行刷新。不幸的是,console.log()可以看到数据更新,但屏幕上仍然没有显示任何内容。通过一番Google,在这里找到了解决方案,需要一个变化检测,下面是一些小的更改。
feat
1、导入NgZone模块:
import { NgZone} from '@angular/core';
2、创建一个NgZone:
this.zone = new NgZone({enableLongStackTrace: false});
3、将代码封装在this.zone.run()中:
ionViewWillEnter() {
this.broadcaster.addEventListener('TAG').subscribe((event) => {
this.zone.run(() => {
this.items.push({
name: event['name'],
age: event['age'],
});
});
});
}
至此,模型更改就会成功检测并更新UI,详情需要阅读Angular Zones和ChangeDetectorRef,希望这可以帮助有类似问题的猿友哈哈。