The problem is its hard to reproduce this, i tried it in a clean project, but i was unable to do this. how can i post a minimal public repo?
whole code of my cart.ts looks like this:
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../providers/product.service';
import { SettingsService } from '../providers/settings.service';
import { Settings } from '../models/settings.model';
import { ModalController, NavController, LoadingController, AlertController } from '@ionic/angular';
import { ProductListModalPage } from '../product-list-modal/product-list-modal.page';
import { RecentModalComponent } from '../recent-modal/recent-modal.component';
import { Storage } from '@ionic/storage';
import { from } from 'rxjs';
@Component({
selector: 'app-cart',
templateUrl: './cart.page.html',
styleUrls: ['./cart.page.scss'],
})
export class CartPage implements OnInit {
settings:Settings
productList=[];
selectedProducts=[];
recentProducts=[];
lastSelection=[];
constructor(private productService:ProductService, private storage:Storage ,private alertCtrl:AlertController,private loadingCtrl:LoadingController,private settingsService:SettingsService,private navCtrl:NavController, private modalCtrl:ModalController) {
this.settingsService.getSettings().subscribe(settings=>{
this.settings=settings;
});
}
ngOnInit() {
this.productService.getProducts(this.settings.url).subscribe((productList)=>{
this.productList=productList;
});
this.storage.get("lastSelection").then(lastSelectionString=>{
if(lastSelectionString){
this.lastSelection=JSON.parse(lastSelectionString);
}
});
this.storage.get("recentList").then(recentProductsString=>{
if(recentProductsString){
this.recentProducts=JSON.parse(recentProductsString);
}
});
console.log("onInit");
}
openRecentList(){
this.modalCtrl.create({
component:RecentModalComponent,componentProps:{recentList:this.recentProducts}
}).then(modalEl=>{
modalEl.onDidDismiss().then(selectedProduct=>{
if(selectedProduct.data){
if(selectedProduct.data="lastSelection"){
this.selectedProducts=[...this.lastSelection].map(product=>({ ...product}));
return;
}
this.addItemToArray(selectedProduct.data,this.selectedProducts);
}
});
modalEl.present();
});
}
openProductList(){
this.modalCtrl.create({
component:ProductListModalPage,componentProps:{productList:this.productList}
}).then(modalEl=>{
modalEl.onDidDismiss().then(selectedProduct=>{
if(selectedProduct.data){
this.addItemToArray(selectedProduct.data,this.selectedProducts);
this.addItemToArray(selectedProduct.data,this.recentProducts);
this.storage.set("recentList",JSON.stringify(this.recentProducts));
}
});
modalEl.present();
});
}
addItemToArray(item,array){
if (!(array.find(selectedItem => selectedItem.ServiceID == item.ServiceID))) {
item.quantity = 1;
array.unshift(item);
console.log(array);
}
}
goBack(){
this.navCtrl.navigateBack("/home");
}
processTransaction(){
this.loadingCtrl.create({
message:"Odesílání transakce"
}).then(loadingEl=>{
loadingEl.present();
this.productService.sendOrderCash(this.settings.url,this.selectedProducts).subscribe(result=>{
console.log(result);
this.lastSelection=[...this.selectedProducts];
this.selectedProducts.splice(0,1);
loadingEl.dismiss();
this.storage.set("lastSelection",JSON.stringify(this.selectedProducts));
console.log(this.selectedProducts);
},err=>{
loadingEl.dismiss();
this.alertCtrl.create({message:err,buttons:["OK"]}).then((alertEl)=>{
alertEl.present();
});
});
})
}
getTotalCost(){
return this.selectedProducts.reduce((a,b)=>{
return a+(b.Price*b.quantity);
},0)
}
removeProduct(product){
const index = this.selectedProducts.indexOf(product);
console.log(index);
this.selectedProducts.splice(index, 1);
}
}
ant template file:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="goBack()">
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Celkem: {{this.getTotalCost()}}Kč</ion-title>
<ion-buttons slot="end">
<ion-button (click)="openRecentList()">
<ion-icon name="flash"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button expand="block" (click)="openProductList()">Přidat položku</ion-button>
<div *ngFor="let product of selectedProducts">
<app-cart-item [cartItem]="product" (remove)="removeProduct($event)">
</app-cart-item>
</div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button color="success" (click)="processTransaction()" [disabled]="this.selectedProducts.length==0">
<ion-icon name="checkmark-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
weird thing is, that removing and adding items works…
