Angular中如何实现点击加号新增带递增编号的独立计数按钮？

问题说明 #

开发Angular应用时遇到功能实现卡点，通过三张场景示意图辅助说明现状：

• 当前实现效果
• 预期实现效果
• 错误实现效果

核心痛点 #

需要为每个动态渲染的按钮配置独立的计数器，如果使用静态/全局计数器作为所有按钮的展示值，会导致所有已渲染的按钮数值同步更新，完全不符合功能需求，目前尚未找到可行的实现方案，现有代码如下。

现有问题代码 #

模板文件 app.component.html #

<div>
  <h2>By click on plus there should be added a new button with a new number</h2>
  <div class="item" *ngFor="let item of obj" (click)="addButton()">
    <span>{{item.id}}</span>
    <span>{{item['count'] ? item['count'] : item['count'] = 0}}</span>
    <button (click)="increment(item)">plus</button>
    <button (click)="decrement(item)">minus</button>
  </div>
</div>
<app-dialog></app-dialog>


<p>Add Button with different number</p>
<h2>{{counter}}</h2>

<div *ngFor="let button of buttons">
  <button (click)="addButton()">{{counter}}</button>
</div>

业务逻辑文件 app.component.ts #

import { isNgTemplate } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { ShareDataService } from './share-data.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  clickEventsubscription: Subscription

  id: number;
  title:String;

  obj = [{ id: 0, }, { title: 'test' }];

  constructor(private share: ShareDataService) {
    this.clickEventsubscription = this.share.getClickEvent().subscribe(() => {
      this.incrementCount(this.counter);
      this.addButton();
    })
  }
  ngOnInit() {
  }
  counter: number = 0;
  incrementCount(counter: any) {
    this.counter++;
  }


  increment(item) {
    item.count++;
  }
  decrement(item) {
    item.count--;
  }

  buttons : {
    id    : number,
}[] = [{ id : 0}];

// Function to add new button
addButton(){
    this.buttons.push({
        id    : this.buttons.length,
    })
  }
}

根因排查 #

现有代码的问题集中在三点：

• 所有动态渲染的按钮统一绑定全局counter变量作为展示值，按钮之间没有独立的状态存储，自然会出现数值同步更新的问题
• 按钮对象的类型定义不完整，没有预留独立计数字段，只能复用全局状态
• 模板中存在反模式写法：直接在插值表达式里给对象属性赋值，会在每次变更检测时触发重复逻辑，带来不必要的性能损耗

正确实现方案 #

核心思路是将计数器状态从全局作用域下沉到每个按钮实例本身，让每个按钮单独持有自己的计数值，渲染时直接读取当前实例的属性，从根源上避免状态共享。

修复后逻辑代码 app.component.ts #

// 定义按钮的明确类型，每个按钮持有独立的计数字段
interface DynamicButton {
  id: number;
  count: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // 原有数组元素补充明确类型和count初始值
  obj: Array<{ id: number; count: number; title?: string }> = [
    { id: 0, count: 0 },
    { title: 'test', id: 1, count: 0 }
  ];

  // 全局counter仅用于生成新按钮的唯一标识，不再直接绑定到按钮展示值
  globalUniqueId: number = 0;

  // 按钮列表使用定义好的类型
  buttons: DynamicButton[] = [];

  constructor(private share: ShareDataService) {
    this.share.getClickEvent().subscribe(() => {
      this.addButton();
    })
  }

  // 原有加减逻辑保持不变，直接操作单个item的独立count
  increment(item: { count: number }) {
    item.count++;
  }

  decrement(item: { count: number }) {
    item.count--;
  }

  // 新增按钮时，给每个实例分配独立的初始计数值
  addButton() {
    this.globalUniqueId++;
    this.buttons.push({
      id: this.globalUniqueId,
      count: this.globalUniqueId
    })
  }
}

修复后模板代码 app.component.html #

<div>
  <h2>By click on plus there should be added a new button with a new number</h2>
  <!-- 移除原有div上绑定的addButton事件，避免点击非按钮区域误触发新增逻辑 -->
  <div class="item" *ngFor="let item of obj">
    <span>{{item.id}}</span>
    <!-- 移除模板内赋值的反模式逻辑，直接读取预先初始化好的count值 -->
    <span>{{item.count}}</span>
    <button (click)="increment(item)">plus</button>
    <button (click)="decrement(item)">minus</button>
  </div>
</div>
<app-dialog></app-dialog>

<p>Add Button with different number</p>

<!-- 每个按钮展示自己实例存储的count值，不再绑定全局counter -->
<div *ngFor="let button of buttons">
  <button (click)="addButton()">{{button.count}}</button>
</div>

实现效果说明：每个按钮的计数值独立存储，修改任意一个按钮的数值不会影响其他按钮；新增按钮时会自动分配唯一的独立数值，完全匹配预期效果。

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