angular - 切换选择添加和删除
问题描述
我正在显示产品目录,列出可用产品和所有与产品相关的价格计划。每个费率计划都有切换按钮,可将产品 + 费率计划添加到订单中。
这些是添加删除项目到 component.ts 文件中的订单的功能:
addrateplan(rateplan, product) {
this.selectedRateplans = this.selectedRateplans.concat(rateplan);
this.selectedProducts = this.selectedProducts.concat(product);
this.snackBar.open(rateplan.name + ' added', 'close', {
duration: 3000,
});
}
removerateplan(rateplan, i) {
this.selectedRateplans.splice(i, 1);
this.snackBar.open(rateplan.name + ' removed', 'close', {
duration: 3000,
});
}
toggleChange(event) {
console.log(event);
}
这是 .html 的部分,我在其中显示选定的费率计划
<table *ngIf="selectedRateplans">
<tr *ngFor="let rateplan of selectedRateplans; let i = index" [attr.data-index]="i">
<td><button mat-button color="warn" (click)="removerateplan(rateplan, i)">remove</button></td><td>{{ rateplan.name }}</td><td>{{ rateplan.status }}</td>
</tr>
</table>
这是为每个费率计划显示的添加产品和费率计划的按钮:
<mat-button-toggle-group #group="matButtonToggleGroup" multiple (change)="toggleChange($event.value)">
<mat-button-toggle value="rateplan" #left>
<mat-icon>add</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
// I used to have a normal button and call (click)="addrateplan(rateplan, element) to add rateplans
我确实有三个问题: 1. 已修复 - 我无法删除费率计划(我认为我使用拼接的方式有问题)-> 请参阅 component.ts 中的更新删除部分
出于可用性原因,我想更改以前带有切换按钮的添加按钮。
如果切换按钮从 +(尚未添加产品/费率计划--> 单击将添加)更改为 -(已添加产品--> 单击将删除费率计划),那就太好了
这是产品 / rateplan json 格式的示例:
{
"products": [{
"id": "8adce42168831a9501688f75d9102aaa",
"sku": "SKU-00001111",
"name": "test 2",
"description": "",
"category": "Base Products",
"effectiveStartDate": "2010-01-27",
"effectiveEndDate": "2100-01-27",
"allowFeatureChanges": false,
"StoreAppID__c": null,
"Prerequisites__c": null,
"Partner_Account_ID__c": null,
"productRatePlans": [{
"id": "8adc8f9968830c1c01688f76d42c4509",
"status": "Active",
"name": "plan 3",
"description": "",
"effectiveStartDate": "2010-01-27",
"effectiveEndDate": "2100-01-27",
"IsTrialRatePlan__c": "False",
"mainIVK__c": null,
"IVK__c": null,
"IVKtype__c": null,
"PriceType__c": "SW",
"VBLO__c": null,
"PriceCode__c": "K",
"CurrencyOfBasePrice__c": "EUR",
"BasePrice__c": null,
"productRatePlanCharges": [{
"id": "8adce42168831a9501688f7791122afd",
"name": "New Component",
"type": "OneTime",
"model": "PerUnit",
"uom": "MB",
"pricingSummary": [
"USD100/MB"
],
"pricing": [{
"currency": "USD",
"price": 100,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": 1,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "One_Time",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": null,
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": null,
"billingPeriodAlignment": null,
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
}]
},
{
"id": "8adce42168831a9501688f767c252aae",
"status": "Active",
"name": "plan 2",
"description": "",
"effectiveStartDate": "2010-01-27",
"effectiveEndDate": "2100-01-27",
"IsTrialRatePlan__c": "False",
"mainIVK__c": null,
"IVK__c": null,
"IVKtype__c": null,
"PriceType__c": "SW",
"VBLO__c": null,
"PriceCode__c": "K",
"CurrencyOfBasePrice__c": "EUR",
"BasePrice__c": null,
"productRatePlanCharges": [{
"id": "8adce42168831a9501688f774d0c2ab0",
"name": "New Component",
"type": "OneTime",
"model": "FlatFee",
"uom": null,
"pricingSummary": [
"USD1000"
],
"pricing": [{
"currency": "USD",
"price": 1000,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "One_Time",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": null,
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": null,
"billingPeriodAlignment": null,
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
}]
},
{
"id": "8adc8f9968830c1c01688f762aac4506",
"status": "Active",
"name": "test",
"description": "",
"effectiveStartDate": "2010-09-05",
"effectiveEndDate": "2100-01-27",
"IsTrialRatePlan__c": "False",
"mainIVK__c": null,
"IVK__c": null,
"IVKtype__c": null,
"PriceType__c": "SW",
"VBLO__c": null,
"PriceCode__c": "K",
"CurrencyOfBasePrice__c": "EUR",
"BasePrice__c": null,
"productRatePlanCharges": [{
"id": "8adc8f9968830c1c01688f771bf4450b",
"name": "one time",
"type": "OneTime",
"model": "FlatFee",
"uom": null,
"pricingSummary": [
"USD15"
],
"pricing": [{
"currency": "USD",
"price": 15,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "One_Time",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": null,
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": null,
"billingPeriodAlignment": null,
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
}]
}
],
"productFeatures": []
},
{
"id": "8adc8f9968830c1c01688a5cbdc7786a",
"sku": "SKU-00001110",
"name": "Malte Test",
"description": "",
"category": "Base Products",
"effectiveStartDate": "2017-09-12",
"effectiveEndDate": "2090-09-12",
"allowFeatureChanges": false,
"StoreAppID__c": null,
"Prerequisites__c": null,
"Partner_Account_ID__c": null,
"productRatePlans": [{
"id": "8adce42168831a9501688a7409736692",
"status": "Active",
"name": "rateplan 2",
"description": "",
"effectiveStartDate": "2018-01-03",
"effectiveEndDate": "2025-01-03",
"IsTrialRatePlan__c": "False",
"mainIVK__c": null,
"IVK__c": null,
"IVKtype__c": null,
"PriceType__c": "SW",
"VBLO__c": null,
"PriceCode__c": "K",
"CurrencyOfBasePrice__c": "EUR",
"BasePrice__c": null,
"productRatePlanCharges": [{
"id": "8adce42168831a9501688a7451576694",
"name": "one time",
"type": "OneTime",
"model": "FlatFee",
"uom": null,
"pricingSummary": [
"USD100"
],
"pricing": [{
"currency": "USD",
"price": 100,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "One_Time",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": null,
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": null,
"billingPeriodAlignment": null,
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
}]
},
{
"id": "8adc8f9968830c1c01688a5db088786c",
"status": "Active",
"name": "Malte rateplan",
"description": "",
"effectiveStartDate": "2017-09-12",
"effectiveEndDate": "2090-09-12",
"IsTrialRatePlan__c": "False",
"mainIVK__c": null,
"IVK__c": null,
"IVKtype__c": null,
"PriceType__c": "SW",
"VBLO__c": null,
"PriceCode__c": "K",
"CurrencyOfBasePrice__c": "EUR",
"BasePrice__c": null,
"productRatePlanCharges": [{
"id": "8adc8f9968830c1c01688a5fa31578bd",
"name": "usage",
"type": "Usage",
"model": "Tiered",
"uom": "Shared Studies",
"pricingSummary": [
"1 to 10 Shared Studies: USD0 flat fee; 11 to 20 Shared Studies: USD10/Shared Studies; 21 to 100 Shared Studies: USD5/Shared Studies"
],
"pricing": [{
"currency": "USD",
"price": null,
"tiers": [{
"tier": 1,
"startingUnit": 1,
"endingUnit": 10,
"price": 0,
"priceFormat": "FlatFee"
},
{
"tier": 2,
"startingUnit": 11,
"endingUnit": 20,
"price": 10,
"priceFormat": "PerUnit"
},
{
"tier": 3,
"startingUnit": 21,
"endingUnit": 100,
"price": 5,
"priceFormat": "PerUnit"
}
],
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "Subscription_End",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": "DefaultFromCustomer",
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": "Month",
"billingPeriodAlignment": "AlignToCharge",
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": "EndOfBillingPeriod",
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
},
{
"id": "8adce42168831a9501688a5e75f16501",
"name": "monthly",
"type": "Recurring",
"model": "FlatFee",
"uom": null,
"pricingSummary": [
"USD50"
],
"pricing": [{
"currency": "USD",
"price": 50,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "Subscription_End",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": "DefaultFromCustomer",
"listPriceBase": "Per_Billing_Period",
"billingTiming": "IN_ADVANCE",
"billingPeriod": "Month",
"billingPeriodAlignment": "AlignToCharge",
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
},
{
"id": "8adc8f9968830c1c01688a5e0770786e",
"name": "sign up",
"type": "OneTime",
"model": "FlatFee",
"uom": null,
"pricingSummary": [
"USD100"
],
"pricing": [{
"currency": "USD",
"price": 100,
"tiers": null,
"includedUnits": null,
"overagePrice": null,
"discountPercentage": null,
"discountAmount": null
}],
"defaultQuantity": null,
"applyDiscountTo": null,
"discountLevel": null,
"discountClass": null,
"productDiscountApplyDetails": [],
"endDateCondition": "One_Time",
"upToPeriods": null,
"upToPeriodsType": null,
"billingDay": null,
"listPriceBase": null,
"billingTiming": null,
"billingPeriod": null,
"billingPeriodAlignment": null,
"specificBillingPeriod": null,
"smoothingModel": null,
"numberOfPeriods": null,
"overageCalculationOption": null,
"overageUnusedUnitsCreditOption": null,
"unusedIncludedUnitPrice": null,
"usageRecordRatingOption": null,
"priceChangeOption": null,
"priceIncreasePercentage": null,
"useTenantDefaultForPriceChange": null,
"taxable": false,
"taxCode": "",
"taxMode": "TaxExclusive",
"triggerEvent": "ContractEffective",
"description": "",
"revRecCode": null,
"revRecTriggerCondition": null,
"revenueRecognitionRuleName": "Recognize upon invoicing",
"useDiscountSpecificAccountingCode": null,
"financeInformation": {
"deferredRevenueAccountingCode": "Professional Services Revenue",
"deferredRevenueAccountingCodeType": "SalesRevenue",
"recognizedRevenueAccountingCode": "Professional Services Revenue",
"recognizedRevenueAccountingCodeType": "SalesRevenue"
}
}
]
}
],
"productFeatures": []
}
]
}
解决方案
您的拼接功能不正确。拼接的语法
array.splice(index, howmany, item1, ....., itemX)
您需要给出一个索引,然后是要从该索引替换的项目数,然后是要替换的项目。看看这里
您已经将索引 i 传递给 removerateplan() 方法。不需要this.selectedRateplans.indexOf(i)
这个。
您更新的功能将是,
removerateplan(rateplan, i) {
this.selectedRateplans = this.selectedRateplans.splice(i, 1);
this.snackBar.open(rateplan.name + ' removed', 'close', {
duration: 3000,
});
}
推荐阅读
- python - 如何以“self”为参数模拟@property 方法?
- facebook - 是否可以使用 Facebook API 在 Facebook 广告下获取评论?
- html - 如何在居中 td 中垂直居中对齐我的数字?
- c# - Bot framework V4 向包含大量数据的响应添加“显示更多”按钮的最佳方式是什么
- php - MYSQL innodb 中的死锁问题
- scala - 实木复合地板到 csv 转换后日期发生变化
- canvas - 画布绘制对角 CSS 渐变
- dataframe - KeyError:“[索引(['MW','LogP','NumAromatic','HBD','HBA'],dtype ='object')]中没有[列]”
- xml - 更新 xml 文件的每个部分中的条目
- asp.net-core - 如何将新的 userId roleId 添加到 AspNetUserRoles 表并从 AspNetUserRoles 表中删除一行?