javascript - Angular2 动态按钮一次只能选择一个

Question

我正在尝试创建以下 UI/UX 按钮:
.. [2015] [2016] [2017]

默认情况下“选择”当前年份(在撰写本文时为 2017 年)，但是，当用户单击“2015”时，应取消选择“2017”和“2016”(这些按钮“互斥”) ')

这些按钮是从外部数据源生成的，该数据源为我提供了年份数据:

<button *ngFor="let year of styles.years"  type="button" name="button" class="btn btn-default" id="{{year.year}}">
  {{year.year}}
</button>

如何创建一个按钮系统，其中一个按钮是“自动选择”的，当选择“其他”按钮时，它会取消选择主动选择的按钮，并将现在单击的按钮设置为“选择”？

Answer 1

在组件activeYear中设置一个属性，并通过将逻辑绑定(bind)到按钮的(点击)来控制它

<button *ngFor="let year of styles.years"  
    [ngClass]="{ active: activeYear === year }"
    (click)="activeYear = year.year"
    type="button" name="button" class="btn btn-default"  id="{{year.year}}">
    {{year.year}}
</button>

Heres a working Plunker demonstrating this