如何在Angular4的片段轮播中动态绑定产品 [英] How to bind products dynamically in snippet carousel in Angular4

查看：130 发布时间：2018/6/23 15:32:34 html angular bootstrap-4

本文介绍了如何在Angular4的片段轮播中动态绑定产品的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一个Angular4应用程序中工作，在这里我需要动态地在片段传送带中生成产品。目前，我给了6（3 + 3）个静态产品，我想将其作为动态过程。

我收到产品数据作为基于Json数据的Json响应，我希望以滑块形式生成产品。

  get_New_Products（）{
 this.productServiceURL =`http：// localhost：abc / api / data / Get_Product`; 
返回this.http.get（this.productServiceURL）; 
}

这是组件文件

（
data => {this.productData = data} b $ b）;
}

这是我的HTML代码。

 < div class =col-sm-9> 
< section class =container> 
< div class =row> 
< div class =col-sm-1> 
< i class =fa fa-userstyle =font-size：25px>< / i> 
< / div> 
< div class =col-sm-9> 
< h5>热门产品< / h5> 
< / div> 
 
< / div> 
< / section> 
< hr> 
< section class =carousel slideid =myCarousel> 
< div class =container> 
< div class =row> 
< div class =col-sm-12 text-right mb-4> 
  < / div> 
< / div> 
< / div> 
 
< div class =container p-t-0 m-t-2 carousel-inner> 
< div class =row row-equal carousel-item active m-t-0> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
< img class =img-fluidsrc =assets / Images / Popular_Products / iPhone1.jpgalt =Carousel 1> 
 < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
< input＃Pname1 type =hiddenvalue =id> 
< span> iPhone< / span> 
< br> 
< br> 
< span> 3433 $< / span> 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
  < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
< input #Pname type =hiddenvalue =id> 
< span>印度香料< / span> 
< br> 
< br> 
< span> 343 $< / span> 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
< img class =img-fluidsrc =assets / Images / Popular_Products / 6.jpgalt =Carousel 1> 
 < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
< span>家用电器< / span> 
< br> 
< br> 
< span> 4500 $< / span> 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
 
< / div> 
< div class =row row-equal carousel-item m-t-0> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
  < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
自行车
< br> 
< br> 
 2329 $ 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
< img class =img-fluidsrc =assets / Images / Popular_Products / 5.jpgalt =Carousel 1> 
 < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
电子物品
< br> 
< br> 
 8333 $ 
< / div> 
< / div> 
< / div> 
 
< / div> 
< div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
  < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
天然油
< br> 
< br> 
 5435 $ 
< / div> 
< / div> 
 
< / div> 
 
< / div> 
< / div> 
< / div> 
< / section>

在此时，我将鼠标放在产品图片上，该图片会显示另一张图片，而且我有onClick功能，可将用户导航到产品详细信息页面。在产品详细信息页面中，我需要显示产品的所有详细信息，以便用户点击产品时获取产品ID。

为此，我有一个隐藏文本框，是否绑定了产品ID，当用户点击产品时，我需要从隐藏文本框中获取Id并将其传递给API。

这里我只在前两张幻灯片中应用了onclick和隐藏文本框。

目前滑动工作正常，I需要使用隐藏ID和onClick功能动态生成滑块。

这是我的CSS。

  / *等于卡片高度* / 
 .row-equal> div [class * ='col-'] {
 display：flex; 
 flex：1 0 auto; 
} 
 .row-equal .card {
 width：100％; 
} 
 / *确保转盘内的卡片高度相同* / 
 .carousel-inner> .row-equal.active，
 .carousel-inner> .row-equal.next ，
 .carousel-inner> .row-equal.prev {
 display：flex; 
} 
 / *防止转换过程中的闪烁* / 
 .carousel-inner> .row-equal.active.left，
 .carousel-inner> .row-equal.active .right {
 opacity：0.5; 
 display：flex; 
} 
 / *控制图片高度* / 
 .card-img-top-250 {
 max-height：250px; 
 overflow：hidden; 
} 
 .card-header {color：dodgerblue} 
 .modal-backdrop.show {
 opacity：0; 
} 
 
 .one {
 width：231px; 
 height：410px; 
职位：亲属; 
 display：inline-block; 
} 
 .one .two {
 display：none; 
位置：绝对; 
 top：0; 
剩下：0; 
 z-index：99; 
} 
 .one：hover .two {
 display：inline; 
} 
 
 .text-muted {
 color：#fff！important; 
} 
 .card-footer {
 padding：.75rem 1.25rem; 
背景颜色：＃343A40; 
 border-top：1px solid＃343A40; 
}

按钮点击的脚本

 <脚本> 
 $（'a [data-slide ='prev]'）。click（function（）{$（'＃myCarousel'）。carousel（'prev'）;}）; 
 $（'a [data-slide =next]'）。click（function（）{$（'＃myCarousel'）。carousel（'next'）;}）; 
< / script> 
< script> 
 $（'a [data-slide ='prev]'）。click（function（）{$（'＃myCarousel1'）。carousel（'prev'）;}）; 
 $（'a [data-slide =next]'）。click（function（）{$（'＃myCarousel1'）。carousel（'next'）;}）; 
< / script>

我曾尝试过，但它只是生成单个框。

 < div class =col-sm-4> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
< img * ngFor =let PRODUCTImage of PRODUCT_IMAGE; let i = indexclass =img-fluid[src] =productImage ['PRODUCT_IMAGE']alt ='img'+ i> ; 
< img * ngFor =let PRODUCTImageOnhover PRODUCT_IMAGE_ONHOVER; let j = indexrouterLink =/ my-cart（click）=getProductName（Pname1）class =img-fluid two[src] =productImageOnhover ['PRODUCT_IMAGE_ONHOVER']alt ='img'+ j> 
< / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
< input * ngFor =let PRODUCT_ID的id; let k = indextype =hidden[value] =id ['PRODUCT_ID']> 
< span * ngFor =让PRODUCT_NAME的产品名称＃Pname1> {{productName ['PRODUCT_NAME']}}< / span> 
< br> 
< br> 
< span * ngFor =let productPrice of PRODUCT_PRICE> {{productPrice ['PRODUCT_PRICE']}}< / span> 
< / div> 
< / div> 
 
< / div>

谢谢。

解决方案

最后我得出了答案

 < div class =col-sm-4* ngFor = 让productData的滑块; let i = index> 
< div class =card> 
< div class =card-img-top card-img-top-250 one> 
< img class =img-fluid[src] =slider ['PRODUCT_IMAGE']alt =Carousel 1> 
 < / div> 
< div class =card-block pt-2> 
< div class =col-sm-12 text-center card-text> 
< span> {{slider.PRODUCT_NAME}}< / span> 
< br> 
< input type =hiddenvalue ={{slider.PRODUCT_ID}}＃Pname1> 
< br> 
< span> {{slider.PRODUCT_PRICE}}< / span> 
< / div> 
< / div> 
< / div> 
< / div>

I am working in an Angular4 application , In this I need to generate products in snippet carousel dynamically.Currently I gave 6 (3+3) static products ,I want to make this as dynamic process.

查看全文

如何在Angular4的片段轮播中动态绑定产品 [英] How to bind products dynamically in snippet carousel in Angular4

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在Angular4的片段轮播中动态绑定产品 [英] How to bind products dynamically in snippet carousel in Angular4

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭