在动态创建的组件中使用html中的变量

Question

我尝试使用发送到动态创建组件的对象中的变量。除了在HTML中显示来自对象的变量之外，一切正常。动态组件上的样式工作。方法getData中的变量不是在HTML中显示，而是在开发控制台中显示。

动态创建：

在我点击

时创建其他组件的TS

onMarkerClick(marker: Marker,data: Data, e) {

    if(this.compRef) {
      this.compRef.destroy();
    }
    const compFactory = this.resolver.resolveComponentFactory(InformationPopupDataComponent);
    this.compRef = compFactory.create(this.injector);
    this.compRef.instance.getData(dataforPopupData);
    let div = document.createElement('div');

    div.appendChild(this.compRef.location.nativeElement);

    marker.setPopupContent(div);
    this.map.openPopup(div,marker.getLatLng());

  }

HTML（InformationPopupDataComponent）（变量未显示）

<div class="popup-container">
  <h3>Data {{data.d}} </h3>
<hr>

</div>

TS（InformationPopupDataComponent）（方法getData中的变量未在HTML中显示，但在开发控制台中显示。）

export class InformationPopupDataComponent implements OnInit {

   private data: Data;
   public id;

  constructor() {
  }

  ngOnInit() {

  }
  getData(data: Data) {
    if(data) {
      this.data= data;
      console.log("DATA", this.data.d);  <= showing
    }
  }

}