我正在使用Angular4应用程序，在此我需要动态生成片段轮播中的产品。目前我提供了6（3 + 3）个静态产品，我想将其作为动态过程。
我收到产品数据作为Json响应，基于我想在滑块中生成产品的Json数据。
get_New_Products(){
this.productServiceURL = `http://localhost:abc/api/data/Get_Product`;
return this.http.get(this.productServiceURL);
}
这是组件文件
ngOnInit() {
this.CartdataService.get_New_Products()
.subscribe(
data => { this.productData = data }
);
}
这是我的HTML代码。
<div class="col-sm-9">
<section class="container">
<div class="row">
<div class="col-sm-1">
<i class="fa fa-user" style="font-size:25px"></i>
</div>
<div class="col-sm-9">
<h5>Popular Products</h5>
</div>
</div>
</section>
<hr>
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</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-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<input #Pname1 type="hidden" value="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">
<img class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<input #Pname type="hidden" value="id">
<span>Indian Spices</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-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</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">
<img class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<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-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<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">
<img class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
当我将鼠标放在将显示另一个图像的产品图像上时，我有一个onClick功能，可以将用户导航到产品详细信息页面。在产品详细信息页面中，我需要显示产品的所有详细信息我在用户点击产品时获取产品ID。
为此我有一个隐藏的文本框，我是否绑定了产品ID，当用户点击产品时，我需要从隐藏文本框中获取ID并将其传递给API。
这里我只在前两张幻灯片中应用了onclick和隐藏文本框。
目前滑动工作正常，我需要使用隐藏ID和onClick功能动态生成滑块。
这是我的css。
/* equal card height */
.row-equal > div[class*='col-'] {
display: flex;
flex: 1 0 auto;
}
.row-equal .card {
width: 100%;
}
/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active,
.carousel-inner>.row-equal.next,
.carousel-inner>.row-equal.prev {
display: flex;
}
/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left,
.carousel-inner>.row-equal.active.right {
opacity: 0.5;
display: flex;
}
/* control image height */
.card-img-top-250 {
max-height: 250px;
overflow:hidden;
}
.card-header{color:dodgerblue}
.modal-backdrop.show {
opacity:0;
}
.one {
width: 231px;
height: 410px;
position: relative;
display: inline-block;
}
.one .two {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.one:hover .two {
display: inline;
}
.text-muted {
color: #fff!important;
}
.card-footer {
padding: .75rem 1.25rem;
background-color:#343A40;
border-top: 1px solid #343A40;
}
按钮单击的脚本
<script>
$('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 = index" class="img-fluid" [src]="productImage['PRODUCT_IMAGE']" alt="'img' + i">
<img *ngFor = "let productImageOnhover of PRODUCT_IMAGE_ONHOVER; let j = index" routerLink="/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 id of PRODUCT_ID; let k = index" type="hidden" [value]="id['PRODUCT_ID']">
<span *ngFor = "let productName of PRODUCT_NAME" #Pname1>{{productName['PRODUCT_NAME']}}</span>
<br>
<br>
<span *ngFor = "let productPrice of PRODUCT_PRICE" >{{productPrice['PRODUCT_PRICE']}}</span>
</div>
</div>
</div>
感谢。
答案 0 :(得分：0)
最后我得出了答案
<div class="col-sm-4" *ngFor="let slider of 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">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" 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="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
<br>
<span>{{slider.PRODUCT_PRICE}}</span>
</div>
</div>
</div>
</div>