我尝试访问模态组件中的变量,但是尽管该变量已在几行之前成功初始化,但我总是收到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();
}
}
有人知道我在做什么错吗? 非常感谢你!