Bootstrap + Angular：带有动态图像的模态

Question

我是Boostrap的新手，我正在尝试使用内部图像打开模态。https://getbootstrap.com/docs/4.4/components/modal

事实是我的页面上有很多图像，我不想为每个图像做一个模态。因此，我尝试动态加载它们。

现在，当我单击图像时，什么都没有出现，但是在检查器中，我清楚地看到模态在那里，虽然完全透明。我做错了什么吗？谢谢！

为了做到这一点，这就是我要做的：

thing.html

[...] // Below the <img> tag that i want to click on
<img src="../../assets/img/photosloc/photo.jpg" class="card-img-top" (click)='showModal(".the/path/to/the/photo.jpg")'>
[...]//Below my modal that should pop
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
  <div class=" modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <img class="modal-content" id="modalImg">
      </div>

    </div>
  </div>
</div>

thing.component.ts

constructor(private modalService: NgbModal) { }
  modal: any;
  modalImg : any;
  span : any;

  ngOnInit() {
    this.modal = document.getElementById("myModal");
    this.modalImg = document.getElementById("modalImg");
    this.span = document.getElementById("close");
  }
showModal(imgPath) {
    console.log(imgPath); 
    this.modal.style.display = "block";
    this.modalImg.src = imgPath;
  }

 closeModal(){
   this.modal.style.display = "none";
 }

Answer 1

您的index.html是否配置正确？它需要jQuery才能工作

in index.html

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>