Javascript Angular2动态按钮，一次只能选择一个

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

默认情况下，当用户单击“2015”、“2017”和“2016”时，应取消选择当前年份（在撰写本文时，2017年）的选项（这些按钮是“互斥的”）

按钮是从一个外部数据源生成的，该数据源为我提供年份数据：

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

{{年.年}

---

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

在组件

activeYear

中设置属性，并通过将逻辑绑定到按钮的

（单击）

来控制它

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

{{年.年}

---

在组件

activeYear

中设置属性，并通过将逻辑绑定到按钮的

（单击）

来控制它

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

{{年.年}

---

对于那些想使用多个类的人，比如我的例子： 添加逗号，然后添加新样式：条件

[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"

---

希望这也能帮助其他人

对于那些想使用多个类的人，比如我的例子： 添加逗号，然后添加新样式：条件

[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"

---

希望这对其他人也有帮助

澄清：我确信“全局变量”是指组件上的属性。@Christopher，我已设置：

activeYear:number=new Date（）.getFullYear（）和我用所选的
替换了
活动的
（样式表中给出的CSS元素），但是，这不是working@StriplingWarrior是的，我知道-让我更新一下“全局变量”这个词，我肯定你指的是组件上的一个属性。@Christopher，我已经设置：
activeYear:number=new Date（）.getFullYear（）和我用所选的
替换了
活动的
（样式表中给出的CSS元素），但是，这不是working@StriplingWarrior是的，我知道-让我更新措辞