Angular 4中解决Cannot read property 'value' of undefined并显示0值

这个报错的核心原因是页面初始化时fedExTax对象本身是undefined，导致你试图访问它的value属性时触发了错误。我们可以通过确保fedExTax始终返回一个合法的对象，同时默认value为0来解决这个问题，具体步骤如下：

1. 初始化默认的_fedExTax对象 #

首先，你需要把_fedExTax初始化为一个符合FedExciseExpense接口的完整对象，而不是留空或者直接赋值数值。这样即使没有找到匹配的政策，也能返回一个有value属性的对象：

// 替换原来的private _fedExTax;
private _fedExTax: BackendDto.FedExciseExpense = {
  coveragePolicyTypeId: 0,
  is953D: 0,
  value: 0 // 默认值设为0
};

2. 修正ngOnInit中的错误赋值 #

原来的ngOnInit代码里，this._fedExTax = this.fedExTax.value = 0;会触发报错，因为此时fedExTax getter返回的是未初始化的_fedExTax（undefined），无法访问value。现在我们已经初始化了_fedExTax，可以删掉这行代码，或者改成更安全的写法（如果需要重置的话）：

ngOnInit() {
  // 如果需要重置默认值，可以这样写
  this._fedExTax.value = 0;
}

3. 优化fedExTax getter逻辑 #

确保当找不到匹配的fedExciseExpensesInputs项时，仍然返回我们预定义的默认对象，而不是可能的undefined：

public get fedExTax(): BackendDto.FedExciseExpense {
  if (this.currentSelectedCoveragePolicy !== 0) {
    const matchedExpense = this.fedExciseExpensesInputs.find(x => 
      x.coveragePolicyTypeId === this.currentSelectedCoveragePolicy && 
      x.is953D === this.currentSelected953D
    );
    // 找到匹配项就返回，否则返回默认对象
    return matchedExpense || this._fedExTax;
  }
  // 当currentSelectedCoveragePolicy为0时，直接返回默认对象
  return this._fedExTax;
}

4. （可选）HTML层的安全防护 #

虽然上面的修改已经确保fedExTax永远不会是undefined，但如果你想在HTML层再加一层防护，可以使用可选链操作符（注意：Angular 9+支持，且双向绑定时需要注意，不过这里我们已经确保对象存在，所以这一步不是必须的）：

<!-- 不过双向绑定中使用?.需要Angular版本支持，更推荐确保对象存在 -->
<input type="text" class="form-control form-control-sm" 
       [(ngModel)]="fedExTax.value" 
       [ngModelOptions]="{standalone: true}" 
       name="{{FedExciseKey}}" 
       numberFormat="numberPercent:.0-2" 
       (ngModelChange)="change()" 
       [required]="true" 
       tooltip="{{'CAPTIVES.LINES.INCCAPTIVEEXPENSE.' + FedExciseKey + 'TOOLTIP'|uppercase|translate}}" 
       placement="bottom">

这样修改后，页面首次加载时fedExTax会返回我们预定义的默认对象，value为0，输入框就会显示0，同时不会再触发Cannot read property 'value' of undefined的错误。

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