Блог

Я пытаюсь получить доступ к переменной в модальном компоненте, но всегда получаю сообщение об ошибке Property null toFixed() can't be applied , хотя переменная уже была успешно инициализирована несколькими строками ранее. Это конкретный шаблон:

 <app-card [hidden]=true>
  <h2>Überblick</h2>
  <div *ngIf="buyingArticles.length > 0">
    <h3>Artikel zum Kauf</h3>
    <ul>
      <li *ngFor="let article of buyingArticles">
        Anzahl: {{article.initialQuantity}}
        Beschreibung: {{article.title}}
        Preis: {{(article.initialQuantity * article.price).toFixed(2)}} €
      </li>
    </ul>
    <h4>Gesamt: {{calculateTotalPrice(buyingArticles).toFixed(2)}} €</h4>
  </div>
  <div *ngIf="retourningArticles.length > 0">
    <h3>Artikel zur Retoure</h3>
    <ul>
      <li *ngFor="let article of retourningArticles">
        Anzahl: {{article.initialQuantity}}
        Beschreibung: {{article.title}}
        Preis: {{(article.initialQuantity * article.price).toFixed(2)}} €
      </li>
    </ul>
    <h4>Gesamt: {{calculateTotalPrice(retourningArticles).toFixed(2)}} €</h4>
  </div>
  <h2>Zu zahlen: {{state.adjustedPrice.toFixed(2)}} €</h2>
  <div class="buttons">
    <button (click)="changeStep('scanner')">Weiteren Artikel scannen</button>
    <button (click)="changeStep('payment')">Bezahlung</button>
    <button (click)="showModal = true; state.adjustedPrice=state.totalPrice">Preis anpassen</button>
  </div>
</app-card>
<div *ngIf="showModal" class="modal">
    <div class="modal-content">
      <button (click)="showModal = false">x</button>
      <h1>Preis anpassen</h1>
      <h2>{{state.adjustedPrice.toFixed(2)}}€</h2>
      <button (click)="calculateDiscount(0.1)">-10%</button>
      <button (click)="calculateDiscount(0.2)">-20%</button>
      <button (click)="calculateDiscount(0.3)">-30%</button>
      <button>Abrunden</button>
      <button (click)="showModal=false; calculateEndSum(calculateTotalPrice(buyingArticles), calculateTotalPrice(retourningArticles))">Bestätigen</button>
    </div>
</div>
  

Как я уже говорил ранее, первое {{state.adjustedPrive.toFixed(2)}} выражение компилируется надлежащим образом, но второе всегда выдает одну ошибку: невозможно прочитать свойство ‘toFixed’ null. И я не знаю почему.
Код из соответствующего ts-файла:

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Article } from 'src/app/model/article';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.css']
})
export class OverviewComponent implements OnInit {

  @Input() buyingArticles: Array<Article>;
  @Input() retourningArticles: Array<Article>;

  @Output() upcomingStep = new EventEmitter<string>();
  //@Output() totalPrice = new EventEmitter<number>();
  //@Output() adjustedPrice = new EventEmitter<number>()
  @Output() total = new EventEmitter<Object>();

  showModal: boolean = false;
  adjustedPrice: number;

  totalPriceBuyingArticles: number;
  totalPriceRetourningArticles: number;

  state = {
    totalPrice: null,
    adjustedPrice: null,
    difference: null,
    discount: []
  }

  changeStep(upcomingStep: string): void {
    this.upcomingStep.emit(upcomingStep);
  }

  calculateDiscount(amount: number): void {
    this.state.adjustedPrice = this.state.totalPrice * (1 - amount);
    //this.state.totalPrice = this.state.adjustedPrice;
    this.state.difference = this.state.totalPrice - this.state.adjustedPrice;
    this.state.discount.push(amount.toString());
  }

  calculateTotalPrice(arrayToSumUp: Array<Article>): number {
    let totalPrice: number = 0;
    arrayToSumUp.forEach(article => {
      totalPrice = totalPrice   article.price * article.initialQuantity;
    });
    return totalPrice;
  }

  calculateEndSum(): void {
    this.state.adjustedPrice = this.calculateTotalPrice(this.buyingArticles) - this.calculateTotalPrice(this.retourningArticles) - this.state.difference;
    if(this.state.discount.length = 0){
      this.state.totalPrice = this.state.adjustedPrice;
    }

      //this.state.adjustedPrice = this.state.totalPrice;
      this.total.emit(this.state);
      //return this.state.totalPrice.toFixed(2);
  }

  constructor() { }

  ngOnInit() {
    this.calculateEndSum();
  }
}
  

Кто-нибудь знает, что я делаю не так?
Большое вам спасибо!