离子 innerHTML 更新

Question

尝试用 innerHTML 更新位于 component 中的 div，值取决于用户交互。 http 数据正确，但它仅在我单击组件时更新，而不是在 drawerHTML 更新时更新。

编辑：我忘了提到 drawerHTML 是在 Google Maps[=38= 的 cordova 插件中设置的] 标记点击回调。我相信这是罪魁祸首，因为它可能是运行在设置值的异步回调中，但似乎并不要求更新元素。

marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe((data) => { this._myProvider.getData(marker.getTitle()).subscribe((data) =>{ this.drawerHTML = this._prepare(data); console.log(this.drawerHTML); }); });

这是显示的位置：

<content-drawer [options]="drawerOptions"> <ion-toolbar> <ion-buttons start> <button ion-button color="light" clear (click)="showDrawer()"> showDrawer </button> </ion-buttons> </ion-toolbar> <ion-content> <div [innerHTML]="drawerHTML"> </div> <button ion-button round small (click)="hideDrawer()">Close</button> </ion-content> </content-drawer>

content-drawer 在单独的文件中设置为离子/angular 组件 content-drawer.html 为：

<ion-content> <ng-content></ng-content> </ion-content>

上面的代码从我家投射到 ng-content。似乎我必须让 content-drawer 手动更新自己，因为数据不会在运行时更新？ DOM 树必须更新？

内容抽屉基于 this implementation。

Answer 1

试试 ChangeDetectorRef.

import { ChangeDetectorRef } from "@angular/core";

注入并实例化它

constructor(private changeDetectorRef:ChangeDetectorRef) { }

像这样写你的代码。

marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe((data) => {
    this._myProvider.getData(marker.getTitle()).subscribe((data) =>{
          this.drawerHTML = this._prepare(data);
          this.changeDetectorRef.detectChanges();
    });
});

这可能会解决您的问题。

离子 innerHTML 更新

Ionic innerHTML update

ionic-framework

ionic2

ionic3

angular