Блог

Я создал модальный загрузчик в angular 7, который загружает динамические данные из API. В первый раз, когда я нажимаю на модальный, он получает данные и правильно передает их в модальный, но после того, как я закрываю модальный и пытаюсь снова открыть тот же или другой модальный, тогда он показывает, что post_detail () не является функцией, и он не открывает модальный снова, в то время как post_detail () — это функция, с помощью которой я вызываю API и работаю при первом нажатии. Если я ввожу статические данные в модальном режиме, то он работает отлично, но если я использую динамические данные из API, то он работает только в первый раз. Моя функция показана ниже:

 post_detail(id){
$("#example").modal("show");
this.http.get(`https://www.pikreview.com/rest/post.php?
f=viewamp;id=${id}`).subscribe(post_detail=>{
this.post_detail=post_detail;
this.post_detail.rss=post_detail.additionalLinks.BLOG;
this.post_detail.fb=post_detail.additionalLinks.FB;
this.post_detail.ig=post_detail.additionalLinks.IG;
this.post_detail.pin=post_detail.additionalLinks.PIN;
this.post_detail.yt=post_detail.additionalLinks.YT;
this.post_detail.review=post_detail.review_by.name;

}); 
}
  

и это html, который при нажатии я отображаю вышеописанную функцию :

 <h5 class="card-title hoverUl" 
style="text-transform:capitalize;font-weight:600;cursor:pointer;"   
(click)="post_detail(post.postId)">   
{{post.title}}
</h5>
  

и это модальный :

 <div class="modal" tabindex="-1" role="dialog" id="example" 
data-backdrop='static' data-keyboard='false'>
<div class="modal-dialog" role="document" style="max-width:60%;">
<div class="modal-content">
     <div class="modal-body">
    <div class="row">
      <div class="col-md-6">
        <h3 style="font-weight:600;margin-bottom:4%;">{{post_detail.title}}</h3>
        <img src="https://pikreview.com{{post_detail.coverPikUrl}}" alt="" style="width:100%;height:345px;">
         <div class="pt-4">
          <span class="float-left"><i class="fa fa-eye"></i> {{post_detail.view_count}}</span>
          <span class="float-right">
          <a href="{{post_detail.blog}}" target="_blank"><i class="fa fa-rss p-1" style="color:#ff6600;"></i></a>
          <a href="{{post_detail.fb}}" target="_blank"><i class="fa fa-facebook p-1" style="color:#3B5998;"></i></a>
          <a href="{{post_detail.ig}}" target="_blank"><i class="fa fa-instagram p-1" style="color:#f40083;"></i></a>
          <a href="{{post_detail.pin}}" target="_blank"><i class="fa fa-pinterest p-1" style="color:#cb2027;"></i></a>
          <a href="{{post_detail.yt}}" target="_blank"><i class="fa fa-youtube p-1" style="color:#bb0000;"></i></a>
          </span>
        </div>
        <div style="clear:both;" class="p-0 pt-4">
        <a href="" class="btn colorCommon btn-block" target="_blank" href="https://pikreview.com{{post_detail.landingUrl}}">Buy Now</a>
      </div>
      </div>
      <div class="col-md-6">
        <div class="pb-5">
          <h5 class="float-left">Review By : <span class="lead">{{post_detail.review}}</span></h5>
          <button (click)="close()" class="close float-right">X</button>
        </div>
        <div class="description" style="clear:both;">
         <p style="white-space:pre-wrap;">{{post_detail.description}}</p>
       </div>
       <div class="p-4">
         <input type="text" placeholder="Leave a comment" class="form-control">
       </div>
      </div>

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