我目前正在开发角度版本6下的应用程序,该应用程序实现的模板具有html,css,js,bootstrap和jquery,以及其他依赖于jquery的其他技术,我遇到的问题是我正在实现随附的滑块通过NgFor显示某些产品的模板,最初在您加载页面时,既不会呈现图像或产品信息本身,也不会呈现样式CSS,但是一旦我重新加载带有缓存的页面,它就会正确显示所有内容,并附加代码和屏幕截图,谢谢!
<ng-container>
<div class="row">
<div class="col-md-12 col-sm-10 col-xs-6">
<div class="tab-content">
<div id="tab3" class="tab-pane active">
<div class="product-slider product-slider1">
<div class="wrap-item" data-pagination="false" data-navigation="true" data-itemscustom="[[0,1],[768,2],[1024,3],[1200,4]]">
<ng-container *ngFor="let prod of productFinal">
<div class="item-product item-product1 style2 text-center">
<div class="product-thumb">
<a href="/detail" class="product-thumb-link rotate-thumb">
<img src="{{prod.images}}" alt="">
<img src="{{prod.images}}" alt="">
</a>
<a href="/quick" class="quickview-link fancybox fancybox.iframe"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
<div class="product-info">
<h3 class="product-title"><a href="/detail">{{prod.name_product}}</a></h3>
<div class="product-price">
<ins class="color"><span>€30.000</span></ins>
</div>
<div class="product-rate">
<div class="product-rating" style="width:100%"></div>
</div>
<div class="product-extra-link">
<a href="#" class="wishlist-link"><i class="fa fa-heart-o" aria-hidden="true"></i><span>Wishlist</span></a>
<a href="#" class="addcart-link">Add to cart</a>
<a href="#" class="compare-link"><i class="fa fa-compress" aria-hidden="true"></i><span>Compare</span></a>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>