Angular

Question

好吧，我知道有很多关于这个确切问题的问题，但即使阅读了其中一些，我也无法解决我的问题。我尝试了使用 changeDetectionRef 的解决方案，但要么我做错了，要么它对我的情况不起作用。

关于我的问题：我正在制作预算书，添加交易和其他东西，一切都很好，直到我添加了余额概览，它显示了账户的总体余额以及将在本月应用的更改。在 ngFor 指令中，余额从 parent(budget-book.component) 发送到 child (day.component)。我明白了，我遇到的问题是，相同的值被发送到每个 child，然后接收、更改并发送到下一个 child。我尝试在 parent 中创建一个数组，其中保存每个 balanceChange 并发送前几天的总和，但这也没有成功。我也在考虑做一个可观察的。

budget-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>
[...]

budget-book.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;
  }
}

但这似乎不是一个很好的解决方案。根据任务的不同，您可以使用存储总余额的服务，而无需将其添加到输入/输出。

Angular - 检查后表达式发生变化

Angular - Expression Changed After It Has Been Checked

javascript

lifecycle

typescript