Question

我在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=view&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>

Angular 7 Bootstrap Modal在第二次单击时未打开

0 个答案: