Angular - 表達式在檢查后發生變化

Question

好吧，我知道有很多關於這個確切問題的問題，但即使閱讀了其中的一些，我也無法解決我的問題。 我嘗試了使用 changeDetectionRef 的解決方案，但要么我做錯了，要么在我的情況下不起作用。

對於我的問題：我正在制作預算簿，添加交易和其他東西，一切都很好，直到我添加了余額概覽，它顯示了帳戶的總體余額以及將在本月應用的更改。 余額在 ngFor 指令中從父級 (budget-book.component) 發送到子級 (day.component)。 我明白了，我遇到的問題是，相同的值被發送給每個孩子，然后接收、更改並發送給下一個孩子。 我嘗試在父級中創建一個數組，其中保存了每個 balanceChange 並發送了前幾天的總和，但這也不起作用。 我也在考慮制作一個可觀察的。

預算-book.component.html

[...]
<ul class="days">
      <app-day (addEvent)="addTransaction($event)" (removeEvent)="removeTransaction($event)" (balanceEvent)="updateBalance($event)"
               *ngFor="let day of days; index as i" [date]="sendDate(this.date.getFullYear(), this.date.getMonth(), i + 1)"
               [transactions]="getTransactions(i)" [balance]="balance"></app-day>
</ul>
[...]

預算書.component.ts

[...]
balance: number;

ngOnInit(): void {
    [...]

    this.balance = 0;
}

[...]

updateBalance(balanceChange: number) {
    this.balance += balanceChange;
}

day.component.html

<div class="header-balance-container">
      <span [class.positive-number]="balance + balanceChange >= 0" [class.negative-number]="balance + balanceChange < 0" class="balance">{{balance + balanceChange | currency: 'EUR'}}</span>
      <span [class.positive-number]="balanceChange >= 0" [class.negative-number]="balanceChange < 0 " class="difference" >{{balanceChange | currency: 'EUR'}}</span>
</div>

day.component.ts

@Input() balance: number;
balanceChange: number;
@Output() balanceEvent = new EventEmitter<number>();

ngOnChanges(): void {
    this.balanceChange = 0;
    if (this.transactions) {
      this.transactions.forEach((transaction: Transaction) => {
        this.balanceChange += transaction.value;
      });
    }
    this.pushBalance();
    // here is where i tried adding the changeDetectionRef
}

[...]

pushBalance() {
    this.balanceEvent.emit(this.balanceChange);
}

幾天以來我一直在解決這個問題，無法弄清楚如何解決。 如果這里有人可以解釋我，我缺少什么以及我的解決方案觀點是什么，我會很高興。

編輯：

一項服務為我做了這件事，對於那些對我的愚蠢感興趣的人，這很簡單，因為這解決了困擾我好幾天的問題。

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BalanceService {
  balanceActivities: number[];

  constructor() {
  }

  setBalances(dayCount: number) {
    this.balanceActivities = new Array(dayCount);
  }

  addBalance(day: number, balanceActivity: number) {
    this.balanceActivities[day] = balanceActivity;
  }

  getBalanceToDate(day: number) {
    let balance = 0;
    this.balanceActivities.forEach((balanceActivity, index) => {
      balance += balanceActivity;
      if (index >= day) {
        return balance;
      }
    });
    return balance;
  }

  getBalance() {
    let balance = 0;
    this.balanceActivities.forEach((balanceActivity, index) => {
      balance += balanceActivity;
    });
    return balance;
  }
}

Answer 1

您可以嘗試使用 DoCheck：

class MyComponent implements OnInit, DoCheck {
  private _balance: number = 0;
  public balance: number;

  ngOnInit(): void {
  }

  ngDoCheck(): void {
    this.balance = this._balance;
  }

  updateBalance(balanceChange: number) {
    this._balance += balanceChange;
  }
}

但這似乎不是一個很好的解決方案。 根據任務，您可以使用將存儲總余額的服務，您無需將其添加到輸入/輸出中。