Angular 中如何实现点击按钮为展示金额的按钮累加金额

现有代码无法运行的核心问题 #

• 事件绑定语法完全不符合Angular规范：模板里写的function="onClick()"不会建立任何点击事件关联，点击按钮根本不会触发组件里的onClick方法
• 组件缺少状态存储：没有定义专门的变量记录当前累计的金额，没有数据源就没法驱动界面同步更新
• 金额展示区是静态写死的文本：展示金额的按钮内容固定写为0,00$，没有和组件状态做绑定，就算触发了累加逻辑，界面也不会变
• 冗余的无效引入：TS里导入的ElementRef、ViewChild在现有逻辑里完全没被使用，属于无效代码

可正常运行的完整代码调整 #

navbar.component.ts 代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent {
  // 存储累计金额，初始值为0
  totalAmount = 0;

  // 点击按钮累加5
  onClick() {
    this.totalAmount += 5;
  }

  // 格式化金额，匹配原需求里x,xx$的展示格式
  get displayAmount() {
    return this.totalAmount.toFixed(2).replace('.', ',');
  }
}

navbar.component.html 代码 #

<!-- 动态绑定格式化后的累计金额 -->
<button>{{ displayAmount }}$</button>
<!-- 用Angular标准的(click)语法绑定点击事件 -->
<button (click)="onClick()">Add 5</button>

扩展提示 #

后续如果要支持不同档位的累加金额，不需要写多个重复的累加方法，只需要把方法改成接收参数的形式即可：

• 修改TS里的方法：onClick(step: number) { this.totalAmount += step }
• 模板里按需要传参：比如<button (click)="onClick(10)">Add 10</button>

全程不需要手动获取DOM元素修改按钮文本，完全靠组件状态驱动界面更新，符合Angular单向数据流的设计逻辑，后续调试和维护也更简单。

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