Question

尝试使用component更新位于innerHTML内的div，其值取决于用户交互。数据通过http正确输入，但仅在我单击组件时才更新，而在drawerHTML更新时不更新。

编辑：我忘了提到drawerHTML是从 Google Maps 标记单击回调的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设置为单独文件中的离子/角组分 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();
    });
});

这可以解决您的问题。Triggering change detection manually in Angular

离子innerHTML更新

1 个答案: