angular6和bootstrap3的滑块问题

时间:2019-01-03 13:37:44

标签: angular6

我目前正在开发角度版本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>

No-Rendered Products

Rendered Products

0 个答案:

没有答案