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

Question

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

我的问题是，我有一个数组对象，其中的值很少，例如 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);
  }
}

共享数据-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

此致

Answer 1

检查以下解决方案 -->

 removeElement(index: number) {
    this.amountCounter -= 29.99;
    this.data.splice(index, 1);
    this.share.amountCounter = this.amountCounter
  }

对于您的用例，我相信编写另一个函数来计算 this.data 对象中所有 amountcounter 的总和将是最好的！

Answer 2

我之前建议的解决方案如下 -->

Add/change 代码中的以下内容

在你的 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

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

Angular how to subtract my array with a value?

arrays

angular

typescript

decrement