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

Question

如何在 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 中做到这一点？

Answer 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供您引用。