Ionic Angular循环计算总和显示NaN问题求助

核心问题 #

你代码里的类型不匹配是导致NaN的关键：

• TS中days被定义为number数组，但HTML里却绑定了day.amount——number类型根本没有amount属性，输入框的值无法正确关联到数组元素，最终累加时拿到的是undefined，和数字相加就会得到NaN。
• 另外calAmount方法里累加this.amount也是错误的，应该遍历days数组累加每个元素的数值。

修正步骤 #

1. 调整days的类型定义：把number数组改成包含amount属性的对象数组，这样才能和HTML的绑定对应上。
2. 修正calAmount方法：遍历数组累加每个元素的amount值。
3. 确保输入框绑定正确：HTML里绑定对象的amount属性，同时处理输入值的类型转换（输入框默认是字符串，要转成数字）。

修正后的代码示例 #

TS文件

// 定义类型
interface Day {
  amount: number;
}

// 初始化days数组
days: Day[] = [];

ngOnInit() {
  // 推入0到30的对象，每个对象初始amount为0
  for (let i = 0; i <= 30; i++) {
    this.days.push({ amount: 0 });
  }
}

calAmount(): number {
  let total = 0;
  // 遍历days累加每个元素的amount
  this.days.forEach(day => {
    // 确保是数字，避免字符串或undefined导致NaN
    total += typeof day.amount === 'number' ? day.amount : 0;
  });
  return total;
}

HTML文件

<!-- 循环days数组，绑定每个day的amount，同时限制输入为数字 -->
<div *ngFor="let day of days">
  <input type="number" [(ngModel)]="day.amount" />
</div>

<!-- 显示计算后的总和 -->
<p>总和: {{ calAmount() }}</p>

额外注意点 #

• 输入框用type="number"，限制只能输入数字，减少类型转换问题。
• 累加时做类型校验，避免意外的非数字值导致NaN。

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