对象加载之前的模态渲染

Question

this.obj数据在模态窗口加载后填充。因此，如何同步数据和模态？

Acomponent.ts

this.dialog.showModal(this.referenceNumber);

dialogComponent.ts

export class   DialogComponent {
   obj:any;
  showModal(name:String) {
  if(name!==null) {
      this.obj=name;
      $("#myModal").modal('show');
         }
  }
    hideModal():void {
    document.getElementById('close-modal').click();
  }
  errorModal() {
    $("#errorModal").modal('show');
  }
}

dialog.html

<div id="myModal" class="modal fade" role="dialog" >
  <div class="modal-dialog ">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Record saved Successfully{{obj}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Angular方法是通过javascript控制模态的可见性。

所以类似：

<div *ngIf="showModal" id="myModal" class="modal fade" role="dialog" >
  <div class="modal-dialog ">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="showModal=false">&times;</button>
      </div>
      <div class="modal-body">
        <p>Record saved Successfully{{obj}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

注意按钮上的*ngIf="showModal"和（单击）事件处理程序。

您的.ts文件需要showModal: boolean;属性，如果您使用按钮更改检测，则按钮单击处理程序将需要运行更改检测。

编辑：是的，不要在Angular中使用jQuery。我推荐ng-bootstrap库。