问题描述
我花了很多时间来解决我的问题,我希望你们能帮助我解决我的问题。
我的问题是,我有一个包含很少值的数组对象,例如 id,title,amountCounter
。让我们看看我的 amountCounter,因为如果我的按钮被点击它确实会计数,但是当我的数组对象被删除时它不会减少。
为了更好地说明我的问题,我做了几张图片:
这是我点击 ID 1 几次后的图片:
这是我点击“X”后我的对象被移除后的图片:
正如您在图片中看到的,我的数组中的 amountCounter
加起来为 29.99,但如果该对象被移除,它不会减少 29.99,我就是不明白为什么。
如果你们能帮助我,我将不胜感激,这是我的文件:
app.component.html
<app-dialog></app-dialog>
<h2>Add values of my service into array:</h2>
<p>Array:</p>
<p>Total: {{amountCounter}}</p>
<div *ngFor="let item of data,let i = index;">
<span>ID: {{item.id}}</span>
<span>Title: {{item.title}}</span>
<span id="remove" (click)="removeElement(i)" class="material-icons">
Click me to remove and decrement the "amountCounter by 29.99"
</span>
</div>
app.component.ts
export class AppComponent {
clickEventsubscription: Subscription;
ngOnInit() {}
id: number;
title: String;
amountCounter: number;
isClicked: boolean = false;
data: any = [];
constructor(private share: ShareDataService) {
this.clickEventsubscription = this.share.getClickEvent().subscribe(() => {
this.initialize();
});
}
removeElement(index: number) {
this.data.splice(index,1);
}
test() {}
initialize() {
this.id = this.share.getId();
this.title = this.share.getTitle();
this.amountCounter = this.share.getAmountCounter();
const newData = {
id: this.id,title: this.title,amountCounter: this.amountCounter
};
this.data.push(newData);
console.log(this.data);
}
}
share-data-service.ts
private subject = new Subject<any>();
title: String;
id: number;
amountCounter: number;
getId() {
return this.id;
}
getTitle() {
return this.title;
}
getAmountCounter() {
return this.amountCounter;
}
sendClickEvent() {
this.subject.next();
}
getClickEvent(): Observable<any> {
return this.subject.asObservable();
}
我还创建了一个 StackBlitz 来更好地了解我的问题:
https://stackblitz.com/edit/angular-ivy-shdyrw?file=src%2Fapp%2Fshare-data.service.ts
最好的问候
解决方法
检查下面的解决方案-->
removeElement(index: number) {
this.amountCounter -= 29.99;
this.data.splice(index,1);
this.share.amountCounter = this.amountCounter
}
对于您的用例,我相信编写另一个函数来计算 this.data 对象中所有数量计数器的总和将是最好的!
,我之前建议的解决方案如下 -->
在您的代码中添加/更改以下内容
在您的app.component.ts
中:
getAmountCounter(){
var sum = 0;
this.data.forEach(entry => {
sum += entry.amountCounter
})
return sum;
}
在您的app.component.html
中:
<h2>Add values of my service into array:</h2>
<p>Array:</p>
<p>Total: {{getAmountCounter()}}</p>
此外,在您的 dialog.component.ts
中:
clickMe() {
this.id = this.id + 1;
this.amountCounter = this.amount;
this.share.amountCounter = this.amountCounter;
this.share.title = this.title;
this.share.id = this.id;
this.share.sendClickEvent();
}
https://stackblitz.com/edit/angular-ivy-ufw7cq?file=src/app/app.component.html