Javascript 离子2电子商务动态计算金额
我正在开发电子商务应用程序 我需要动态计算数量 这是我的Html代码 我在数组中有Cartproducts值。并使用*ngfor显示产品列表Javascript 离子2电子商务动态计算金额,javascript,angular,ionic-framework,ionic2,ionic3,Javascript,Angular,Ionic Framework,Ionic2,Ionic3,我正在开发电子商务应用程序 我需要动态计算数量 这是我的Html代码 我在数组中有Cartproducts值。并使用*ngfor显示产品列表 <div class="cart" > <div> <ion-row class="product-in-cart" padding *ngFor="let p of Cartproducts;let i=index"> <ion-col c
<div class="cart" >
<div>
<ion-row class="product-in-cart" padding *ngFor="let p of Cartproducts;let i=index">
<ion-col col-4 class="pic-blk">
<img class="pic-image" src="{{p.P_IMAGES[0].URL}}" alt="product2">
<ion-row>
<ion-col col-4 class="minus">
<button ion-button outline small><ion-icon name="remove" (click)="countOperator(-1,p,i)"></ion-icon></button>
</ion-col>
<ion-col col-4 class="label">
<ion-label text-center *ngIf="Pid != p.C_ID || count <= 1">1</ion-label>
<ion-label text-center *ngIf="Pid == p.C_ID && count > 1">{{count}}</ion-label>
</ion-col>
<ion-col col-4 class="plus">
<button ion-button outline small><ion-icon name="add" (click)="countOperator(1,p,i)"></ion-icon></button>
</ion-col>
</ion-row>
</ion-col>
<ion-col col-8 class="pic-details">
<h1>{{p.P_TITLE}}</h1>
<p class="subtitle">Subtitle</p>
<p class="code">Code: 123</p>
<ion-row class="price-blk">
<ion-col width-50 class="product-per-price"><img src="./assets/images/rupee-black.svg" alt="Rupee" >{{p.PRICE_SALE}} <em>/ Unit</em></ion-col>
<ion-col width-50 text-right class="product-full-price" ><img src="./assets/images/rupee-black.svg" alt="Rupee" *ngIf="Price == i">{{count * p.PRICE_SALE}}</ion-col>
</ion-row>
<div class="cancel">
<button (click)="cancel(i)">Cancel X</button>
</div>
</ion-col>
</ion-row>
</div>
<div padding class="apply-coupon-blk">
<p class="blk-text-title">Apply Coupon</p>
<ion-row class="apply-coupon">
<ion-col col-8>
<ion-input type="text" placeholder="Type coupon code"></ion-input>
</ion-col>
<ion-col col-4>
<button ion-button block class="apply-btn">Apply</button>
</ion-col>
</ion-row>
</div>
<div padding class="price-summary-blk">
<p class="blk-text-title">Price Details</p>
<ion-row>
<ion-col>Sub Total</ion-col>
<ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">4000</ion-col>
</ion-row>
<ion-row>
<ion-col>Estimated Tax(%)</ion-col>
<ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">200</ion-col>
</ion-row>
<ion-row padding-top class="total">
<ion-col>Total</ion-col>
<ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">4200</ion-col>
</ion-row>
</div>
</div>
[
{
"P_ID": 1,
"C_ID": 1,
"SKU": 0,
"P_TITLE": "Martina",
"P_TYPE": "simple",
"P_DESCRIPTION": "Commodo adipisicing officia non excepteur officia nostrud. Eu voluptate amet elit nulla.",
"P_STOCK": 100,
"PRICE_REGULAR": 194,
"PRICE_SALE": 161,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
}
],
"P_STATUS": "Active",
"id": "595f3e418c4d19b50ac21b84"
},
{
"P_ID": 2,
"C_ID": 1,
"SKU": 1,
"P_TITLE": "Kristen",
"P_TYPE": "simple",
"P_DESCRIPTION": "Laborum cupidatat dolor tempor cillum incididunt in veniam nisi dolore.",
"P_STOCK": 100,
"PRICE_REGULAR": 130,
"PRICE_SALE": 174,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
}
],
"P_STATUS": "Active",
"id": "595f3e418c4d19b50ac21b85"
},
{
"P_ID": 3,
"C_ID": 1,
"SKU": 2,
"P_TITLE": "Jayne",
"P_TYPE": "simple",
"P_DESCRIPTION": "Anim ad et sunt aliquip proident fugiat deserunt.",
"P_STOCK": 100,
"PRICE_REGULAR": 215,
"PRICE_SALE": 184,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
}
],
"P_STATUS": "Active",
"id": "595f3e428c4d19b50ac21b86"
}
]
谢谢以下是实现此目标的步骤： 在Cartproducts数组中添加计数属性。 更新您产品中所选产品的“计数”属性 countOperator函数。 将{{count*p.PRICE\u SALE}}替换为{{p.count*p.PRICE\u SALE}}
希望这会有所帮助。您对所有产品使用的是单个计数变量吗？如果是的话，那就糟糕了，你需要管理每种产品的数量。普朗克会有帮助的。谢谢你的回复。我不知道。是的，我对每个产品都使用单一计数。我如何解决此问题？你能在这里粘贴你的Cartproducts数组吗？如果你能在这里共享组件和模板代码或plunker.@FahadNisar，我可以修复代码。请检查我更新我的问题并添加Cartproducts数组。谢谢你的回答。我有一个疑问。如何在中更新计数属性Cartproducts数组。您正在函数中将对象作为p传递。因此，您可以访问count变量，如p.count，并可以根据需要增减。p、 计数=p.count+1；或p.count=p.count-1；仅当您首先为阵列中的每个产品添加计数属性时，此操作才有效。请尝试此操作，并告知我是否有效。如果有效，您可以将我的答案标记为已接受：u在吗？我遵循了此步骤。但没有更新UI中的计数值。为什么？但我更新了数组中的计数值。等等。让我为你创造一个普朗克。
[
{
"P_ID": 1,
"C_ID": 1,
"SKU": 0,
"P_TITLE": "Martina",
"P_TYPE": "simple",
"P_DESCRIPTION": "Commodo adipisicing officia non excepteur officia nostrud. Eu voluptate amet elit nulla.",
"P_STOCK": 100,
"PRICE_REGULAR": 194,
"PRICE_SALE": 161,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
}
],
"P_STATUS": "Active",
"id": "595f3e418c4d19b50ac21b84"
},
{
"P_ID": 2,
"C_ID": 1,
"SKU": 1,
"P_TITLE": "Kristen",
"P_TYPE": "simple",
"P_DESCRIPTION": "Laborum cupidatat dolor tempor cillum incididunt in veniam nisi dolore.",
"P_STOCK": 100,
"PRICE_REGULAR": 130,
"PRICE_SALE": 174,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
}
],
"P_STATUS": "Active",
"id": "595f3e418c4d19b50ac21b85"
},
{
"P_ID": 3,
"C_ID": 1,
"SKU": 2,
"P_TITLE": "Jayne",
"P_TYPE": "simple",
"P_DESCRIPTION": "Anim ad et sunt aliquip proident fugiat deserunt.",
"P_STOCK": 100,
"PRICE_REGULAR": 215,
"PRICE_SALE": 184,
"P_ATTR": [
{}
],
"P_IMAGES": [
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
},
{
"URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
}
],
"P_STATUS": "Active",
"id": "595f3e428c4d19b50ac21b86"
}
]