Angular - Выражение изменилось после проверки - PullRequest
Новая
       6

Angular - Выражение изменилось после проверки

0 голосов
/ 02 апреля 2020

Ну, я знаю, что есть масса вопросов по этой проблеме, но даже после прочтения некоторых из них, я не могу решить свою проблему. Я попробовал решение с помощью changeDetectionRef, но либо я делаю это неправильно, либо оно просто не работает в моем случае.

К моей проблеме: я делаю бюджетную книгу, добавляю транзакции и прочее, все все было хорошо, пока я не добавил обзор баланса, который показывает общий баланс на счете и изменения, которые будут применены в этом месяце. Баланс отправляется от родителя (budget-book.component) ребенку (day.component) в директиве ngFor. Я вижу, что проблема, с которой я столкнулся, заключается в том, что одно и то же значение отправляется каждому ребенку, принимается, изменяется и впоследствии отправляется следующему ребенку. Я попытался создать массив в родительском объекте, в котором сохранен каждый 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;
}

день .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;
  }
}

1 Ответ

0 голосов
/ 02 апреля 2020

Вы можете попробовать использовать 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;
  }
}

Но это не очень хорошее решение. В зависимости от задачи вы можете использовать сервис, который будет хранить общий баланс, и вам не нужно будет добавлять его к вводу / выводу.

...