Angular模态框调用toFixed()报null错误，求排查方案

首先，咱们来看你遇到的「Cannot read property 'toFixed' of null」错误，核心原因是模态框渲染时state.adjustedPrice的值还是null，虽然你在ngOnInit里调用了calculateEndSum()，但这里有几个隐藏的问题导致赋值失败：

1. 条件判断的语法错误 #

在calculateEndSum()方法里，你写了这样一行代码：

if(this.state.discount.length = 0){

这里用了赋值运算符=而不是比较运算符==或===，导致这个条件永远为false，this.state.totalPrice = this.state.adjustedPrice这行代码永远不会执行。后续调用calculateDiscount()时，this.state.totalPrice还是初始的null，自然无法计算出有效的adjustedPrice。

2. Input数据可能未及时初始化 #

buyingArticles和retourningArticles是@Input属性，在组件的ngOnInit生命周期钩子执行时，这些输入数据可能还没从父组件传递过来。这时候calculateTotalPrice()会返回0，但state.totalPrice依然是null，后续依赖它的计算都会出问题。

3. 初始值未设置默认值 #

你的state对象初始时totalPrice和adjustedPrice都设为null，而模板里直接调用toFixed(2)，一旦值没被及时赋值，就会抛出错误。

具体修复步骤 #

步骤1：修复条件判断的语法错误 #

把calculateEndSum()里的赋值改成比较：

if(this.state.discount.length === 0){
    this.state.totalPrice = this.state.adjustedPrice;
}

步骤2：给state设置初始默认值 #

把state的初始值从null改成0，避免一开始就出现null的情况：

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

步骤3：用ngOnChanges监听输入变化 #

因为@Input的数据可能在组件初始化后才更新，所以需要添加ngOnChanges钩子，当buyingArticles或retourningArticles变化时重新计算价格：

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

// ... 其他代码

export class OverviewComponent implements OnInit, OnChanges {

    // ... 其他代码

    ngOnChanges(changes: SimpleChanges): void {
        // 当购买或退货商品列表变化时，重新计算价格
        if (changes.buyingArticles || changes.retourningArticles) {
            this.calculateEndSum();
        }
    }
}

步骤4：模板中使用安全导航操作符（可选但推荐） #

在模板里的toFixed调用前加上?.，即使值为null/undefined也不会报错，而是显示空：

<!-- 模态框里的表达式修改为 -->
<h2>{{state.adjustedPrice?.toFixed(2)}}€</h2>
<!-- 页面里的也可以加上 -->
<h2>Zu zahlen: {{state.adjustedPrice?.toFixed(2)}} €</h2>

这样修改后，你的模态框里的价格应该就能正常显示，不会再抛出null的错误了。

内容的提问来源于stack exchange，提问作者andreasteich