- 首页
- 前端开发
- 在轮播中添加产品在 Angular4 中生成新行
在轮播中添加产品在 Angular4 中生成新行
[英] Adding products in carousel generates new row in Angular4
本文介绍了在轮播中添加产品在 Angular4 中生成新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在一个 Angular4 应用程序中工作，在这个我有一个轮播展示了流行的产品.在我的情况下，在默认视图中，当我点击左或右按钮时，我已经显示了 3 个产品，它将显示另外 3 个产品.目前我有 6 个产品 (3+3) 都是静态值.
问题:
当我通过静态代码在滑块中添加另外 1 个或多个产品时，它会生成一行新的幻灯片.
我尝试了一些示例，但对我没有任何作用.
我想要做的是如果我在carousel中添加更多产品，carousel必须将所有产品显示为正常幻灯片.
注意:现在我已经给出了静态值，实际上在我的项目中，我将绑定来自 API 响应的所有产品，其中包括图像路径、产品名称、价格、隐藏 id.
我已经创建了一个 stackblitz 文件，我保存了所有的静态代码.
https://stackblitz.com/edit/angular-mn29mi?file=app%2Fapp.component.html
用于从 API 绑定产品的动态代码.
<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 2" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
<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>
请帮我动态绑定API中的产品，使滑块在产品数量增加时不会产生新的行.
组件代码:
导出类 LandingpageComponent {产品名称:任意；产品数据:任何；滑块路径:任意；sideMenuSliders : 任何;滑块_Active_Item:任何；side_Menu_Active_Item : 字符串；滑块_Sliding_Item : 任何;side_Menu_Slider_Image :任何；构造函数(私有 CartdataService:CartdataService，私有路由器:路由器，){this.router.events.subscribe(() =>window.scrollTo(0, 0) );}块(数组，大小){让结果 = [];结果 = [];而(数组.长度){结果.push(array.splice(0, size));}返回结果；}getProductName(Pname: 任意) {this.CartdataService.get_Product(Pname.textContent);}ngOnInit() {this.CartdataService.get_New_Products().subscribe(数据 =>{this.productData = 数据});}}
解决方案
你开始吧，你需要做的就是将你的数据数组分成 3 的一部分，然后以这种方式循环两次.
组件端:
ngOnInit() {this.CartdataService.get_New_Products().subscribe(数据 =>{this.productData = this.chunks(data,3);});}块(数组，大小){让结果 = [];结果 = [];而(数组.长度){结果.push(array.splice(0, size));}返回结果；}
模板端:
<div class="row row-equal carousel-item m-t-0" *ngFor="let chunkProducts of productData;"><div class="col-sm-4" *ngFor="let slider of chunkProducts;"><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 2" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
<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>
工作演示
Working in an Angular4 application,In this I have a carousel were I have shown the popular products .In my case in the default view I have displayed 3 products when I clicked on left or right button it will display another 3 products .
currently I have 6 products (3+3) all are static values.
Issue :
When I add another 1 or more product in slider by static code it generates a new row of slides.
I have tried some examples nothing is worked for me.
What I want to do is If I add more products in carousel,carousel must display all the products as the normal slides .
Note : Now I have give the static values ,Actually in my project I will bind all the products from API response which will include image path,productname,price,hidden id.
I have created an stackblitz file there I kept all the static codes.
https://stackblitz.com/edit/angular-mn29mi?file=app%2Fapp.component.html
Dynamic code for binding products from API.
<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>
Please help me to dynamically bind the products from API and make the slider will not generate new rows when number of product increase.
Component code :
export class LandingpageComponent {
product_Name: any;
productData: any;
sliderPaths: any;
sideMenuSliders : any;
slider_Active_Item: any;
side_Menu_Active_Item : string;
slider_Sliding_Item : any;
side_Menu_Slider_Image : any;
constructor(private CartdataService: CartdataService, private router: Router,) {
this.router.events.subscribe(
() => window.scrollTo(0, 0) );
}
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
}
getProductName(Pname: any) {
this.CartdataService.get_Product(Pname.textContent);
}
ngOnInit() {
this.CartdataService.get_New_Products().subscribe(
data => {
this.productData = data
});
}
}
解决方案
Here you go, All you need to do is chunk your data array in to parts of 3 , then loop through it twice this way.
Component Side :
ngOnInit() {
this.CartdataService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data,3);
});
}
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
}
Template side :
<div class="row row-equal carousel-item m-t-0" *ngFor="let chunkProducts of productData;">
<div class="col-sm-4" *ngFor="let slider of chunkProducts;">
<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>
</div>
WORKING DEMO
这篇关于在轮播中添加产品在 Angular4 中生成新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
