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并通过将逻辑绑定到(click)按钮来控制它

<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>

下面是一个工作的Plunker展示了这一点