Angular使用ngFor实现乘法表仅显示最后结果的问题

尝试根据输入值生成乘法表，但显示结果时，因for循环逻辑问题，只能得到最后一条计算结果，无法展示完整乘法表。

现有代码 #

multiplytable.component.ts #

export class multiplytableComponent implements OnInit{
  result!:any;
  calcnums =[1,2,3,4,5,6,7,8,9,10,11,12];
  calculate(tablenumber:string){
    for(let i = 1; i <= 12; i++) {
      const result = i * parseFloat(tablenumber);
      this.result= `${parseFloat(tablenumber)} * ${i} = ${result}`;
      console.log(`${parseFloat(tablenumber)} * ${i} = ${result}`);
  }
  }
}

multiplytable.component.html #

Enter Table Number: <input type="text" #tablenumber />
<button (click)="calculate(tablenumber.value)">Multiply Table</button>
<h3 *ngFor="let val of calcnums">{{result}}</h3>

问题原因 #

当前this.result是单个变量，for循环每次迭代都会用新的计算结果覆盖旧值，最终仅保留最后一次循环的结果。而HTML中*ngFor遍历calcnums数组时，每一行都绑定同一个result变量，导致所有行显示的都是最后一条计算结果。

修复方案 #

1. 修改TS代码：将result改为数组类型，每次计算前清空数组，循环时把每条乘法表达式添加到数组中

export class multiplytableComponent implements OnInit{
  // 改为数组类型存储所有结果
  result: string[] = [];
  calcnums =[1,2,3,4,5,6,7,8,9,10,11,12];
  
  calculate(tablenumber:string){
    // 每次计算前清空数组，避免多次点击结果累加
    this.result = [];
    const num = parseFloat(tablenumber);
    for(let i = 1; i <= 12; i++) {
      const product = i * num;
      this.result.push(`${num} * ${i} = ${product}`);
      console.log(`${num} * ${i} = ${product}`);
    }
  }
}

2. 修改HTML代码：让*ngFor直接遍历result数组，无需依赖calcnums

Enter Table Number: <input type="text" #tablenumber />
<button (click)="calculate(tablenumber.value)">Multiply Table</button>
<h3 *ngFor="let item of result">{{item}}</h3>

修改后，点击按钮会生成完整的乘法表数组，HTML遍历数组即可展示每一条计算结果。

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