如何在角度 6 的 div 上添加徽章？答案

【问题标题】：How to add badge on div in angular 6?如何在角度 6 的 div 上添加徽章？
【发布时间】：2018-12-03 17:02:33
【问题描述】：

如何在 Angular 6 的 div 上添加徽章？

我在 html 中有动态 div。我想增加特定 div 的计数器。例如，我有五个 div，其 id 为（div1，div2，div3，div4，div5），我有一个按钮名称增加计数器，它增加所有 div 的计数器，但我想增加计数器特定 div 的值。请找到随附的文件。

请查找快照：

我附上了我的示例代码：

这里是显示 div 的 html：

<div class="container text-center">
  <div class="row">
    <div class="col-sm" *ngFor="let item of [1,2,3,4,5]; let index" style="height:120px; border:1px solid #ccc">
      Div {{ index }} <label calss="badge badge-default">0</label>
    </div>
  </div>
  <br />
  <p><a (click)="increaseCounter(index)" class="btn btn-primary" style="cursor: pointer">Increase Counter</a></p>
</div>

这是.ts文件中的函数：

increaseCounter(k) {
  this.counter++;
}

我想在特定的 div 上添加计数器。

请帮助我如何在 Angular 6 中做到这一点？

【问题讨论】：

每个 div 都需要一个单独的按钮和计数器变量，否则如何知道要增加哪个 div 的计数？
是的，我得到了答案。
@SiddAjmera 是的
@SiddAjmera 假设我有 20 个动态 div，那么我该如何管理计数器。我无法添加静态。

标签： javascript angular typescript

【解决方案1】：

你可能需要稍微调整一下，但你可以使用Bootstrap's Badges

像这样使用它：

<button (click)="div1Counter = div1Counter + 1" type="button" class="btn btn-primary">
  DIV 1 <span class="badge badge-light">{{ div1Counter }}</span>
</button>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

试试看：

<button (click)="counter1 = counter1++" class="btn btn-default">
DIV <label class="badge badge-default">{{ counter1 }}</label>
</button>

【讨论】：