Angular 如何用一个值减去我的数组？

如何解决Angular 如何用一个值减去我的数组？

我花了很多时间来解决我的问题，我希望你们能帮助我解决我的问题。

我的问题是，我有一个包含很少值的数组对象，例如 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