Question

我尝试访问模态组件中的变量，但是尽管该变量已在几行之前成功初始化，但我总是收到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)}}表达式可以正确编译，但是第二个Always总是抛出一个错误：无法读取null的属性“ toFixed”。而且我不知道为什么。来自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();
  }
}

有人知道我在做什么错吗？非常感谢你！

空高空变量的属性已初始化

0 个答案: